どのようにこのコードはuseEffectフックでリスナーなしSETSTATEフックの後に実行されていますか?

asnyder002:

私は万博バーコードスキャナに探していますし、彼らの例では、それらはSETSTATEフックの後に実行する機能を持っています。私は私の理解がSETSTATEフックが、それはコンポーネントを再レンダリングと呼ばれた後だったので、フックが呼び出された後、それを実行することだ理由を理解することだけしたいと思います。

私は機能handleBarCodeScannedを参照しています。どのようにアラートがsetScanned(真)の後に呼び出されていますか?

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';

const ScanScreen = (props) => {
    const [hasPermission, setHasPermission] = useState(null);
    const [scanned, setScanned] = useState(false);

    useEffect(() => {
        (async () => {
        const { status } = await BarCodeScanner.requestPermissionsAsync();
        setHasPermission(status === 'granted');
        })();
    }, []);

    const handleBarCodeScanned = ({ type, data }) => {
        setScanned(true);
        alert(`Bar code with type ${type} and data ${data} has been scanned!`);
    };

    if (hasPermission === null) {
        return <Text>Requesting for camera permission</Text>;
    }
    if (hasPermission === false) {
        return <Text>No access to camera</Text>;
    }

    return (
        <View
        style={{
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'flex-end',
        }}>
        <BarCodeScanner
            onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
            style={StyleSheet.absoluteFillObject}
        />

        {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
        </View>
    );
};

export default ScanScreen;
アレックス・ウェイン:

状態を設定すると、非同期です。あなたには、いくつかのイベントハンドラで状態の複数のビットを設定する可能性があるためです。あなたは、たとえば、でした:

const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    setData(data);
    setScanType(type);
};

すべてがコンポーネントを実行して行われた後、それからちょうど変わってしまったすべての状態で再描画されます。内部的には、あなたが状態を変更する場合、更新を必要とするなどのコンポーネント、および(非常に簡単には)後でそれが実際にレンダリングをやって開始することだけマークを反応させます。

あなたが状態を変更した後、それが実行し続けるので、あなたが状態を変更した後ので、あなたも他のものを行うことができます。以下のような警告を表示し、またはHTTPリクエスト、または任意のアプリケーションのニーズを開始します。

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=30733&siteId=1