React TypeScript异步组件报错：无法作为JSX组件使用的解决咨询

React组件不能是async函数，因为async函数的返回值是Promise，而React要求组件必须返回合法的JSX元素、null或者其他符合React节点类型的值，这就是你遇到报错的原因。

要实现组件渲染时自动请求对应username的API数据，正确的做法是用React的状态管理和副作用钩子来处理：

修改后的组件代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';
// 确保已导入Card相关组件

interface AccordionCardProps {
  username: string;
}

const AccordionCard = ({ username }: AccordionCardProps) => {
  // 存储API返回的字符串数据
  const [data, setData] = useState<string | null>(null);
  // 标记请求是否在加载中
  const [isLoading, setIsLoading] = useState(true);
  // 存储请求错误信息
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // 定义异步请求函数，放在useEffect内部执行
    const fetchUserData = async () => {
      try {
        setIsLoading(true);
        // 注意：原代码里的反斜杠是笔误，应该用正斜杠拼接URL
        const response = await axios.get(`endpoint/${username}`);
        setData(response.data);
        setError(null);
      } catch (err) {
        setError('获取用户数据失败');
        setData(null);
      } finally {
        setIsLoading(false);
      }
    };

    fetchUserData();

    // 可选：添加请求取消逻辑，避免username快速切换时的竞态问题
    const abortController = new AbortController();
    return () => abortController.abort();
  }, [username]); // 依赖项设为username，每次username变化自动重新请求

  // 加载状态下显示加载提示
  if (isLoading) {
    return (
      <Card style={{ width: '33vh', marginBottom: "5px" }}>
        <Card.Body>
          <Card.Title style={{ fontSize: "15px" }}>{username}</Card.Title>
          <Card.Text style={{ fontSize: "13px" }}>加载中...</Card.Text>
        </Card.Body>
      </Card>
    );
  }

  // 请求出错时显示错误信息
  if (error) {
    return (
      <Card style={{ width: '33vh', marginBottom: "5px" }}>
        <Card.Body>
          <Card.Title style={{ fontSize: "15px" }}>{username}</Card.Title>
          <Card.Text style={{ fontSize: "13px", color: "red" }}>{error}</Card.Text>
        </Card.Body>
      </Card>
    );
  }

  // 正常渲染数据
  return (
    <Card style={{ width: '33vh', marginBottom: "5px" }}>
      <Card.Body>
        <Card.Title style={{ fontSize: "15px" }}>{username}</Card.Title>
        <Card.Text style={{ fontSize: "13px" }}>
          {data ? <p>{data}</p> : <p>无可用数据</p>}
        </Card.Text>
      </Card.Body>
    </Card>
  );
};

export default AccordionCard;

核心要点说明 #

• 组件改为同步函数，不再用async修饰，保证返回值是合法的JSX元素
• 用useState管理数据、加载状态和错误状态，实现UI和数据的联动
• useEffect钩子负责触发异步请求，依赖数组里的username确保每次用户名变化时重新拉取数据
• 添加加载和错误状态的UI反馈，避免用户看到空白或无意义的内容
• 可选的AbortController可以取消未完成的请求，防止旧请求结果覆盖新请求的问题

内容的提问来源于stack exchange，提问作者gfek