如何从react-native中的异步函数获取值？

问题描述

function CategoryCard (props) {

    const [done,setDone] = React.useState(null);
    let check;

    React.useEffect(() => {
        async function checkData() {
            check = await getData(props.path);
            // prints CORRECTLY
            console.log(check);
        }
        checkData();
    //prints INCORRECTLY
        console.log(check);
        setDone(true);
    },[]);

    return (

        <View>
        {done ? (
            <Text>{check}</Text>
        ):(
            <View style={[styles.container,styles.horizontal]}>
                <ActivityIndicator size="large" color="#99ff99" />
            </View>
        )}
        </View>
    );
}

如何在react-native中将值从异步函数转换为常规函数？ 在上面的代码中，第一个console.log输出期望值，但是第二个console.log输出未定义值，好像异步函数对变量检查没有任何影响。 我需要来自getData(props.path)的check值才能在<Text>组件中显示它。

有什么想法吗？

解决方法

将其置于状态中。

function CategoryCard (props) {

    const [check,setCheck] = React.useState(null);

    React.useEffect(() => {
        async function checkData() {
            const data = await getData(props.path);
            setCheck(data);
        }
        checkData();

    },[]);

    return (

        <View>
        {check ? (
            <Text>{check}</Text>
        ):(
            <View style={[styles.container,styles.horizontal]}>
                <ActivityIndicator size="large" color="#99ff99" />
            </View>
        )}
        </View>
    );
}