如何从承诺（异步/等待）中获取数据并在承诺之外使用它？

Question

所以我等待承诺兑现，然后我想在.then()或async函数之外使用结果数据。

function HomeScreen() {

    const userData = async () => { 
        await AsyncStorage.getItem("user_nicename")     
    }

    return (
        <View style={styles.container}>      
            <Text>Hello, { userData() } </Text>  //*I want to use it here for example*//

            <Button 
                style={styles.buttonLogin}
                onPress={() => navigation.navigate('LoginScreen')}
                title='Logout'
            />      
        </View>
    ) 
}

export default HomeScreen;

当然我的代码会抛出一个错误，因为userData()是一个“承诺对象”。 我只想要字符串值，在.then(data => ... )内部访问没有问题。 但是我如何在外面访问它以便我可以在其他地方使用它？

Answer 1

你使用useState和useEffect

import { useState, useEffect } from "react";

function HomeScreen() {
    const [userData, setUserData] = useState(undefined);

    useEffect(() => {
        (async () => {
            setUserData(await AsyncStorage.getItem("user_nicename"));
        })();
    }, []);

    return (
        <View style={styles.container}>      
            <Text>Hello, { userData } </Text>

            <Button 
                style={styles.buttonLogin}
                onPress={() => navigation.navigate('LoginScreen')}
                title='Logout'
            />      
        </View>
    ) 
}

export default HomeScreen;