React组件中异步操作与JSX渲染的正确实践

const AccordionCard = async ({username}:AccordionCardProps) =>{
  const repos = await axios.get(`endpoint\${username}`);
  // ... 其他逻辑
  return (/* JSX */); // 实际上这里返回的是 Promise<JSX>
}

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Card } from 'react-bootstrap'; // 假设使用react-bootstrap的Card组件

interface AccordionCardProps {
  username: string;
}

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

  // 2. 使用 useEffect 钩子来执行异步数据获取的副作用
  // 这里的空数组 [] 作为依赖项，表示这个 effect 只在组件挂载时运行一次
  useEffect(() => {
    // 3. 在 useEffect 的回调函数内部定义一个异步函数
    // 注意：useEffect 的回调函数本身不能是 async
    const fetchUserData = async () => {
      setIsLoading(true); // 开始加载，设置加载状态为 true
      setError(null);     // 清除之前的错误信息
      try {
        const response = await axios.get(`endpoint/${username}`); // 发起 API 请求
        setUserData(response.data); // 请求成功，更新数据状态
      } catch (e: any) {
        console.error("Error fetching user data:", e);
        setError("加载用户数据失败。"); // 请求失败，设置错误信息
        setUserData(null); // 清空数据
      } finally {
        setIsLoading(false); // 无论成功或失败，加载完成，设置加载状态为 false
      }
    };

    // 4. 调用异步函数以启动数据获取
    fetchUserData();
  }, [username]); // 依赖项中包含 username，当 username 变化时重新获取数据

  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;