如何从Promise(async/await)获取数据并在Promise外部使用

Promise的 resolved 值永远无法被同步获取，异步操作的执行时机晚于当前同步执行的渲染代码，所以你直接在JSX里调用userData()时，拿到的永远是Pending状态的Promise对象，不可能是你需要的字符串值。
在React/React Native组件中使用异步返回的渲染值，标准做法是通过组件状态存储异步结果，在组件挂载阶段触发异步操作，结果返回后更新状态触发重渲染。

import { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

function HomeScreen({ navigation }) {
    // 初始化用户名状态，默认值可设为空字符串或加载占位文本
    const [userNicename, setUserNicename] = useState('');

    useEffect(() => {
        const loadUserData = async () => {
            try {
                const storedName = await AsyncStorage.getItem("user_nicename");
                // 异步操作完成后更新状态，自动触发组件重渲染
                setUserNicename(storedName ?? '');
            } catch (error) {
                console.log('读取本地用户信息失败:', error);
            }
        };
        loadUserData();
    }, []);

    return (
        <View style={styles.container}>      
            <Text>Hello, {userNicename}</Text>
            <Button 
                style={styles.buttonLogin}
                onPress={() => navigation.navigate('LoginScreen')}
                title='Logout'
            />      
        </View>
    ) 
}

export default HomeScreen;

• 不要在JSX渲染位置直接调用async函数，渲染过程是同步执行的，此时异步操作尚未完成，无法拿到最终结果。
• 所有需要展示在UI上的异步值，都要存入组件状态（如useState），状态更新后React会自动重渲染组件，把最新值展示到页面。
• 你原来的userData函数缺少return语句，即使在.then回调中获取结果，也只会拿到undefined，正确写法需要补return await AsyncStorage.getItem("user_nicename")，但即便补全return，也不能直接在渲染位置调用，仍需遵循状态更新的流程。
• 读取本地存储建议增加异常捕获，避免存储读写错误导致组件崩溃。
• 如果用户信息需要在多个页面复用，可以把这部分读取逻辑抽到全局状态（Context、Zustand、Redux等）中，避免每个页面重复读取本地存储。

内容的提问来源于stack exchange，提问作者Rollor