React中如何获取fetch返回的Promise内的实际可用数据？

问题核心原因 #

React 组件默认不能直接声明为 async 函数，async 函数会返回 Promise 而不是 React 可识别的 JSX 元素，这就是你尝试写 async 组件时报错的原因。
你之前在then回调里只能打印拿不到数据渲染，本质是因为异步回调的执行时机晚于组件的首次渲染，你没有把拿到的数据放到响应式状态里，React 感知不到数据变化，自然不会触发重新渲染把数据更新到页面上。

标准解决方案 #

函数组件内获取异步数据，需要配合useState（状态存储）和useEffect（副作用执行）两个 Hook 实现，修改后的代码如下：

import React, { useState, useEffect } from "react";
import JsonApi from "../../services/jsonApi";

const UserPage = () => {
  const jsonApi = new JsonApi();
  // 声明存储用户数据的状态，初始值为null
  const [user, setUser] = useState(null);
  // 声明加载状态，用于展示加载中提示
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 封装异步请求逻辑
    const fetchUser = async () => {
      try {
        // 等待异步请求返回结果
        const res = await jsonApi.getUser();
        // 将结果更新到状态中，状态更新会触发组件重新渲染
        setUser(res);
      } catch (err) {
        // 可自行添加错误处理逻辑，比如弹窗提示请求失败
        console.error('获取用户信息失败', err);
      } finally {
        setLoading(false);
      }
    };
    fetchUser();
  }, []); // 空依赖数组表示该副作用只在组件首次挂载时执行一次

  // 加载中兜底展示
  if (loading) return <div>加载中...</div>;
  // 未获取到用户数据的兜底展示
  if (!user) return <div>未查询到用户信息</div>;

  return (
    <div className="app">
      <h1>{user.name}</h1> 
      <p>这里是用户的相关信息！</p>
    </div>
  );
};

export default UserPage;

额外说明 #

如果你使用的是 React 18 及以上版本，也可以配合 Suspense 实现 async 组件写法，但上述写法是 React 生态中最通用、兼容性最好的异步数据获取方案，更适合新手掌握。

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