React中await Promise后返回HTML元素出现报错的问题咨询

错误原因 #

你遇到的这个错误核心问题非常明确：你把DiffState组件定义成了async函数。

React对函数组件的返回值有严格要求——它必须是合法的React子节点（比如JSX元素、null、字符串等），但async函数的返回值本质是一个Promise对象，这完全不符合React的渲染规则。当React尝试渲染这个Promise时，自然就抛出了"Objects are not valid as a React child (found: [object Promise])"的错误。

另外还要澄清一个误区：你可能混淆了React.lazy的异步加载逻辑和组件内部的异步操作。React.lazy是用来异步加载组件代码文件的（通过import()返回的Promise实现），但它要求最终导出的组件必须是普通的函数/类组件，不能是async函数。

修复方案 #

根据你的需求，分两种场景给出修复代码：

场景1：仅需组件加载后等待2秒显示内容

修改DiffState.js，用useState管理渲染状态，useEffect执行异步操作：

import React, { useState, useEffect } from "react";

const DiffState = () => {
  // 用状态控制要显示的内容，初始为null表示加载中
  const [displayText, setDisplayText] = useState(null);

  useEffect(() => {
    // 封装异步逻辑到普通函数中
    const loadContent = async () => {
      await new Promise(resolve => setTimeout(resolve, 2000));
      setDisplayText("hello");
    };

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

  // 加载期间可以返回null或自定义加载提示
  return displayText ? <h1>{displayText}</h1> : <h1>Loading...</h1>;
};

export default DiffState;

场景2：配合React.lazy做组件代码懒加载

如果你的初衷是用lazy实现组件代码的按需加载，同时在组件内部做异步操作，那么index.js可以保持不变，只修改DiffState.js（去掉async，把异步逻辑移到组件内部）：

import React, { useState, useEffect } from "react";

// 这里是普通的函数组件，不是async函数
const DiffState = () => {
  const [displayText, setDisplayText] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setDisplayText("hello");
    }, 2000);
  }, []);

  return displayText ? <h1>{displayText}</h1> : null;
};

export default DiffState;

这种情况下，React.lazy会异步加载DiffState的代码文件，加载完成后渲染组件，组件内部再等待2秒显示"hello"，同时Suspense的fallback会在组件代码加载期间显示。

额外说明（React 18+） #

如果是React 18+版本，你也可以用use钩子来简化异步数据的处理，它会自动在Promise pending时触发Suspense的fallback：

import React, { use } from "react";

const waitTwoSeconds = () => new Promise(resolve => setTimeout(() => resolve("hello"), 2000));

const DiffState = () => {
  const displayText = use(waitTwoSeconds());
  return <h1>{displayText}</h1>;
};

export default DiffState;

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