解决React函数组件中异步操作的陷阱：使用useEffect管理数据获取

const MyAsyncComponent = async ({ someProp }: Props) => {
  const data = await fetchData(); // 异步操作
  return <div>{data}</div>;
};

import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 假设已安装axios
import { Card } from 'react-bootstrap'; // 假设使用react-bootstrap

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

const AccordionCard: React.FC<AccordionCardProps> = ({ username }) => {
  // 1. 使用useState管理数据加载状态和数据本身
  const [userData, setUserData] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  // 2. 使用useEffect执行异步数据获取副作用
  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) {
        console.error("Error fetching user data:", e);
        setError("Error loading user data."); // 数据获取失败，设置错误信息
      } finally {
        setIsLoading(false); // 无论成功或失败，加载结束
      }
    };

    // 调用异步函数
    fetchUserData();

  }, [username]); // 依赖项数组：当username改变时，重新运行effect

  // 3. 根据加载状态、错误状态和数据渲染UI
  return (
    <Card style={{ width: '33vh', marginBottom: "5px" }}>
      <Card.Body>
        <Card.Title style={{ fontSize: "15px" }}>{username}</Card.Title>
        <Card.Text style={{ fontSize: "13px" }}>
          {isLoading ? (
            <p>Loading user data...</p> // 加载中状态
          ) : error ? (
            <p style={{ color: 'red' }}>{error}</p> // 错误状态
          ) : userData ? (
            <p>{userData}</p> // 数据加载成功
          ) : (
            <p>No data available.</p> // 初始状态或无数据
          )}
        </Card.Text>
      </Card.Body>
    </Card>
  );
};

export default AccordionCard;