如何从一个承诺(async/await)获得数据，并使用它'外面'的承诺?

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;