在React Native中利用useEffect获取并展示异步数据

// services/accountService.js
import AsyncStorage from '@react-native-async-storage/async-storage'; // 假设使用AsyncStorage存储token

export const AccountRequest = async () => {
    // 假设 retrieveToken 函数从 AsyncStorage 或其他地方获取认证token
    const retrieveToken = async () => {
        try {
            const token = await AsyncStorage.getItem('userToken');
            return token;
        } catch (error) {
            console.error("Failed to retrieve token", error);
            return null;
        }
    };

    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",
                },
            });

            if (!response.ok) { // 检查HTTP响应状态码
                const errorData = await response.json();
                throw new Error(`HTTP error! status: ${response.status}, message: ${JSON.stringify(errorData)}`);
            }

            return await response.json();
        } else {
            throw new Error("Authentication token not found.");
        }
    } catch (error) {
        console.error("Error retrieving account data:", error);
        // 可以根据需要抛出错误或返回一个表示错误的特定值
        throw error; // 重新抛出错误，以便调用者可以处理
    }
};

// screens/SetScreen.js
import React, { useState, useEffect } from "react";
import { Text } from "react-native"; // 假设这是你的Text组件
import { AccountRequest } from "../services/accountService"; // 引入数据服务

// 假设这些是你的自定义组件，此处仅为示例
const AccountBackground = ({ children }) => <>{children}</>;
const AccountCover = () => null;
const Title = ({ children }) => <Text style={{ fontSize: 24, marginVertical: 10 }}>{children}</Text>;
const AccountContainer = ({ children }) => <>{children}</>;
const Spacer = ({ children }) => <>{children}</>;

export const SetScreen = ({ navigation }) => {
    // 用于存储用户数据的状态变量，初始值为空对象
    const [userData, setUserData] = useState({});
    // 假设 query 状态可能用于其他目的，但在此示例中，我们主要关注 userData
    const [query, setQuery] = useState(""); 
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchUserData = async () => {
            setIsLoading(true);
            setError(null);
            try {
                const data = await AccountRequest();
                setUserData(data); // 将获取到的数据保存到 userData 状态
            } catch (err) {
                console.error("Failed to fetch user data:", err);
                setError(err.message || "Failed to load user data.");
            } finally {
                setIsLoading(false);
            }
        };

        fetchUserData();
        // 依赖数组。如果为空数组 `[]`，则 `useEffect` 只会在组件挂载时运行一次。
        // 如果包含 `query`，则 `query` 变化时会重新运行。
        // 在本例中，如果 `query` 不影响数据获取逻辑，使用 `[]` 更合适，
        // 但为了贴合原始问题，我们保留 `[query]`。
    }, [query]); // 依赖数组，当 query 变化时重新运行 effect

    if (isLoading) {
        return <Text>Loading user data...</Text>;
    }

    if (error) {
        return <Text style={{ color: 'red' }}>Error: {error}</Text>;
    }

    return (
        <AccountBackground>
            <AccountCover />
            <Title>Instellingen</Title>
            <AccountContainer>
                <Spacer position="top" size="large">
                    {/* 使用 userData?.email 安全地访问属性 */}
                    <Text variant="label">邮箱: {userData?.email}</Text>
                    <Text>用户名: {userData?.username}</Text>
                    {/* 可以根据需要显示更多用户信息 */}
                </Spacer>
            </AccountContainer>
        </AccountBackground>
    );
};