React异步组件报错：Objects are not valid as a React child求助

你遇到的报错是因为MainPage是async函数，调用后返回的是Promise对象，而React无法直接将Promise作为子元素渲染。下面提供两种可行的解决方式：

方式一：使用useEffect + useState处理异步请求（兼容所有React版本） #

这是最常用的方案，把异步请求放到useEffect钩子中，用状态管理数据、加载状态和错误信息，根据不同状态渲染对应UI：

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

export const MainPage = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 定义异步请求函数
    const fetchUser = async () => {
      try {
        const resp = await fetch(`http://localhost:8000/users/63fc9a335a6f38aa2dd47d15`, {
          method: 'get',
          headers: { 'x-access-token': 123 }
        });
        // 检查请求是否成功
        if (!resp.ok) {
          throw new Error('用户数据请求失败');
        }
        const userData = await resp.json();
        setUser(userData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

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

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

  if (error) {
    return <div>出错了：{error}</div>;
  }

  return (
    <div>
      MainPage
      {/* 根据实际返回的user结构调整渲染内容 */}
      {user && <div>用户ID：{user._id}</div>}
      {user && <div>用户名：{user.name}</div>}
    </div>
  )
}

export default MainPage;

方式二：React 18+ 异步组件 + Suspense（现代项目方案） #

如果你的项目使用React 18及以上版本，可以直接保留async组件，但需要用Suspense组件包裹，指定加载时的占位UI：

修改MainPage组件 #

import React from 'react'

export const MainPage = async () => {
  const resp = await fetch(`http://localhost:8000/users/63fc9a335a6f38aa2dd47d15`, {
    method: 'get',
    headers: { 'x-access-token': 123 }
  });

  if (!resp.ok) {
    throw new Error('用户数据请求失败');
  }
  
  const user = await resp.json();
  
  return (
    <div>
      MainPage
      {user && <div>用户ID：{user._id}</div>}
      {user && <div>用户名：{user.name}</div>}
    </div>
  )
}

export default MainPage;

修改App组件（用Suspense包裹） #

import React, { Suspense } from 'react';
import MainPage from './MainPage';

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>加载中...</div>}>
        <MainPage/>
      </Suspense>
    </div>
  );
}

注意：这种方式需要确保项目环境支持React 18的异步组件特性，比如Create React App需要升级到v5及以上版本。

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