React Native中如何在Text组件展示useEffect获取的用户邮箱？

1. 修正状态初始化 #

把原有的query状态初始值从空字符串改为空对象，因为返回的用户数据是包含email、username等字段的对象，空字符串无法正常访问属性：

const [userData, setUserData] = useState({});

2. 调整useEffect逻辑 #

• 移除依赖项中的query，改用空数组[]，确保组件挂载时仅请求一次数据，避免不必要的重复调用
• 在请求成功后调用setUserData更新状态，把接口返回的用户数据存入状态中：

useEffect(() => {
    AccountRequest()
        .then((data) => {
            console.log(data.email);
            setUserData(data); // 将获取到的用户数据存入状态
        })
        .catch(err => {
            console.error('获取用户数据失败:', err);
        });
}, []); // 空数组确保仅在组件挂载时执行

3. 修正渲染逻辑 #

在Text组件中使用状态里的用户数据，同时可以添加加载状态提示，避免数据未加载完成时显示空白：

<Spacer position="top" size="large">
    <Text variant="label">{userData.email || '加载中...'}</Text>              
</Spacer>

4. 修复AccountRequest的错误处理 #

原函数catch块中的error("can't retrieve data")是错误调用方式，改为console.error输出错误信息，同时抛出错误让调用方可以捕获处理：

export const AccountRequest = async () => {
    const token = await retrieveToken();
    try {
        if (token) {
            const response = await fetch("http://192.168.1.65:8000/api/user/me/", {
                method: "GET",
                headers: {
                    Authorization: `Token ${token}`,
                    "Content-Type": "application/json",
                },
            });
            console.log(response);
            // 新增HTTP状态码判断，确保请求成功
            if (!response.ok) {
                throw new Error(`请求失败: ${response.status}`);
            }
            return await response.json();
        } else {
            throw new Error('未获取到token');
        }
    } catch (error) {
        console.error("无法获取用户数据:", error);
        throw error; // 抛出错误，让调用方可以捕获处理
    }
};

完成以上修改后，获取到的用户邮箱就能正常展示在页面上了。

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