React中如何渲染异步获取的数据？

你的代码存在两个核心问题：

1. 直接调用getdata()会返回Promise对象，React无法直接渲染Promise
2. 组件顶部的getdata.then逻辑不会生效，因为组件函数执行时这个回调返回的JSX并没有被组件返回

要正确渲染异步获取的数据，需要结合React的useState和useEffect钩子来管理状态和异步操作，以下是修正后的代码：

import { useState, useEffect } from 'react';

const Print = () => {
  // 存储异步获取的数据
  const [data, setData] = useState(null);
  // 标记加载状态
  const [loading, setLoading] = useState(true);
  // 存储请求错误信息
  const [error, setError] = useState(null);

  useEffect(() => {
    // 内部定义异步函数处理数据请求
    const fetchData = async () => {
      try {
        // 等待getdata返回结果
        const res = await getdata();
        // 更新数据状态
        setData(res);
      } catch (err) {
        // 捕获并存储错误
        setError(err.message);
      } finally {
        // 请求完成后结束加载状态
        setLoading(false);
      }
    };

    fetchData();
    // 空依赖数组确保只在组件挂载时执行一次请求
  }, []);

  // 根据不同状态渲染对应内容
  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载出错：{error}</div>;

  return (
    <>
      <div>{data}</div>
    </>
  );
};

export default Print;

关键说明： #

• 状态管理：用useState分别存储数据、加载状态和错误，确保组件能根据状态变化重新渲染
• 异步处理：在useEffect内部定义异步函数，避免直接将useEffect回调设为async函数（会引发内存泄漏警告）
• 状态分支渲染：根据加载、错误、成功三种状态，给用户明确的反馈，避免渲染undefined或Promise对象

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