React函数组件中异步数据加载与状态管理的最佳实践

const AccordionCard = async ({username}: AccordionCardProps) => {
  // 异步操作直接在组件函数体内执行
  const repos = await axios.get(`endpoint/${username}`);
  const {data} = repos;

  return (
    <Card>
      <Card.Body>
        <Card.Title>{username}</Card.Title>
        <Card.Text>
          {data ? <p>{data}</p> : null}
        </Card.Text>
      </Card.Body>
    </Card>
  );
};

Error: 'AccordionCard' cannot be used as a JSX component. Its return type 'Promise<JSX.Element>' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement<any, any>': type, props, key.

import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 假设你使用axios进行网络请求

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

const AccordionCard: React.FC<AccordionCardProps> = ({ username }) => {
  // 定义状态变量来存储从API获取的数据
  const [data, setData] = useState<string | null>(null);
  // ... 其他逻辑
};

import React, { useState, useEffect } from 'react';
import axios from 'axios';

interface AccordionCardProps {
  username: string;
}

const AccordionCard: React.FC<AccordionCardProps> = ({ username }) => {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    // 在useEffect内部定义一个异步函数来获取数据
    async function getRepoData() {
      try {
        const response = await axios.get(`endpoint/${username}`);
        setData(response.data); // 更新状态
      } catch (error) {
        console.error("Error loading user data:", error);
        setData("Error loading user data."); // 处理错误情况
      }
    }

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

  // ... JSX 渲染逻辑
};

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

interface AccordionCardProps {
  username: string;
}

const AccordionCard: React.FC<AccordionCardProps> = ({ username }) => {
  const [data, setData] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(true); // 添加加载状态
  const [error, setError] = useState<string | null>(null); // 添加错误状态

  useEffect(() => {
    async function getRepoData() {
      setIsLoading(true); // 开始加载，设置isLoading为true
      setError(null); // 清除之前的错误
      try {
        const response = await axios.get(`endpoint/${username}`);
        setData(response.data);
      } catch (e) {
        console.error("Failed to fetch user data:", e);
        setError("Error loading user data."); // 设置错误信息
        setData(null); // 清空数据
      } finally {
        setIsLoading(false); // 无论成功或失败，加载结束
      }
    }

    getRepoData();
  }, [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>Loading user data...</p>
          ) : error ? ( // 如果有错误，显示错误信息
            <p style={{ color: 'red' }}>{error}</p>
          ) : data ? ( // 数据加载成功
            <p>{data}</p>
          ) : ( // 初始状态或数据为空
            <p>No data available.</p>
          )}
        </Card.Text>
      </Card.Body>
    </Card>
  );
};

export default AccordionCard;