在React组件中处理异步数据加载的正确姿势

import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 假设你使用axios进行HTTP请求
import { Card } from 'react-bootstrap'; // 假设你使用react-bootstrap的Card组件

// 定义组件props的类型
interface AccordionCardProps {
  username: string;
}

const AccordionCard: React.FC<AccordionCardProps> = ({ username }) => {
  // 1. 使用useState Hook来存储从API获取的数据
  // 初始化为null，表示数据尚未加载
  const [userData, setUserData] = useState<string | null>(null);
  // 额外添加一个状态来表示加载中
  const [isLoading, setIsLoading] = useState<boolean>(true);
  // 额外添加一个状态来表示错误
  const [error, setError] = useState<string | null>(null);

  // 2. 使用useEffect Hook来执行异步数据获取的副作用
  // 它的回调函数会在组件首次渲染后执行，并且可以根据依赖项重新执行
  useEffect(() => {
    // 3. 在useEffect的回调函数内部定义一个异步函数
    // 注意：useEffect的回调函数本身不能直接是async，因为它可能返回一个清理函数
    // 所以我们通常在内部定义一个async函数并立即调用它
    const fetchUserData = async () => {
      setIsLoading(true); // 开始加载时设置isLoading为true
      setError(null); // 清除之前的错误信息
      try {
        const response = await axios.get(`https://api.github.com/users/${username}/repos`); // 替换为你的实际API endpoint
        // 假设API返回的数据是一个字符串，或者我们需要从中提取一个字符串
        // 这里简化为直接使用response.data，实际可能需要进一步处理
        setUserData(JSON.stringify(response.data)); // 将数据存储到状态中
      } catch (e) {
        console.error("Error fetching user data:", e);
        setError("加载用户数据失败，请稍后再试。"); // 设置错误信息
        setUserData(null); // 发生错误时清空数据
      } finally {
        setIsLoading(false); // 无论成功或失败，加载结束时设置isLoading为false
      }
    };

    // 4. 调用异步函数以启动数据获取
    fetchUserData();

    // 5. 依赖项数组：
    // 如果数组为空 `[]`，副作用只会在组件挂载时执行一次。
    // 如果包含 `username`，则当 `username` 属性改变时，副作用会重新执行。
    // 根据需求，如果每个用户名的payload需要重新获取，则应包含 `username`。
    // 在本例中，因为数据依赖于`username`，所以我们将其加入依赖数组。
  }, [username]); // 当username变化时重新运行effect

  return (
    <Card style={{ width: '33vh', marginBottom: "5px" }}>
      <Card.Body>
        <Card.Title style={{ fontSize: "15px" }}>{username}</Card.Title>
        <Card.Text style={{ fontSize: "13px" }}>
          {isLoading ? (
            <p>加载用户数据中...</p>
          ) : error ? (
            <p style={{ color: 'red' }}>{error}</p>
          ) : userData ? (
            <p>{userData}</p>
          ) : (
            <p>暂无数据。</p> // 在没有数据且没有加载/错误时显示
          )}
        </Card.Text>
      </Card.Body>
    </Card>
  );
};

export default AccordionCard;