React Native中useEffect异步数据获取与UI更新的最佳实践

// services/account.js
export const AccountRequest = async () => {
    const token = await retrieveToken(); // 假设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",
                },
            });
            if (!response.ok) { // 检查响应状态
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return await response.json();
        } else {
            throw new Error("Token not found");
        }
    } catch (error) {
        console.error("can't retrieve data", error);
        throw error; // 重新抛出错误以便上层捕获
    }
};

// components/SetScreen.js (原始问题代码片段)
export const SetScreen = ({ navigation }) => {  
    const [query, setQuery] = useState(""); // 此时query被用作字符串

    useEffect(() => {
        AccountRequest().then((data) => {
            console.log(data.email); // 数据已获取并打印
        });
    }, [query]); // 依赖项

    return (
        // ...
        <Text variant="label">{query.email}</Text> // 错误：query是字符串，没有email属性
        // ...
    );
};

import React, { useState, useEffect } from 'react';
import { Text } from 'react-native'; // 假设Text组件来自react-native或其他UI库
import { AccountRequest } from '../services/account'; // 导入服务函数

// 假设AccountBackground, AccountCover, Title, AccountContainer, Spacer等是自定义组件
// 为简洁起见，这里只关注核心逻辑
const AccountBackground = ({ children }) => <>{children}</>;
const AccountCover = () => <Text>Cover</Text>;
const Title = ({ children }) => <Text>{children}</Text>;
const AccountContainer = ({ children }) => <>{children}</>;
const Spacer = ({ children }) => <>{children}</>;


export const SetScreen = ({ navigation }) => {
  // 保持query状态，如果它有其他用途。
  // 如果query仅用于触发useEffect，可能需要重新评估其必要性或将其作为依赖项。
  const [query, setQuery] = useState(''); 

  // 新增一个状态变量来存储用户数据，初始值设为空对象或null
  const [userData, setUserData] = useState({}); 

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const data = await AccountRequest();
        console.log("Fetched data email:", data.email);
        setUserData(data); // 将获取到的数据保存到userData状态
      } catch (error) {
        console.error("Error fetching user data:", error);
        // 处理错误，例如显示错误消息给用户
      }
    };

    fetchUserData(); // 调用异步函数
  }, []); // 依赖数组为空，表示只在组件挂载时执行一次

  return (
    <AccountBackground>
      <AccountCover />
      <Title>Instellingen</Title>
      <AccountContainer>
        <Spacer position="top" size="large">
          {/* 使用可选链 ?. 访问email属性，防止在数据未加载时报错 */}
          <Text variant="label">{userData?.email}</Text>
          <Text>{userData?.email}</Text> 
        </Spacer>
      </AccountContainer>
    </AccountBackground>
  );
};