Reactjs 对象作为由async关键字引起的React子对象无效（找到：[object Promise]）

我有一个非常简单的代码沙盒示例，在这里我加载了一个加载。。然后是一个你好的世界

const delay = (t) => new Promise((resolve) => setTimeout(resolve, t));

export async function getMessageAPI() {
  await delay(1000);
  return Promise.resolve("Hello, World!");
}

export default async function AsyncMessage() {
  const [message, setMessage] = React.useState(null);

  React.useEffect(() => {
    async function fetchData() {
      const result = await getMessageAPI();
      console.log(result);
      setMessage(result);
    }
    fetchData();
  }, []);

  if (!message) {
    return "Loading...";
  }

  return <div>{message}</div>;
}

很长一段时间，我认为我的承诺设置有问题。最后，我发现我的错误是在

导出默认异步函数AsyncMessage（）{

一旦我删除了那个关键字，一切都很好。我知道我现在不需要它（我以前在组件主体的某个地方放了wait）

问题有人能解释一下为什么我在这个案例中得到了这样一个神秘的错误，而不是在这里不使用'async'吗

import React from "react";

export default async function AsyncMessage() {
  return <div>hello</div>;
}

> Objects are not valid as a React child (found: [object Promise])

从“React”导入React；
导出默认异步函数AsyncMessage（）{
回复你好；
}
>对象作为React子对象无效（找到：[对象承诺]）

有人能解释一下为什么我在这个案例中得到了这样一个神秘的错误，而不是在这里不使用'async'吗

import React from "react";

export default async function AsyncMessage() {
  return <div>hello</div>;
}

> Objects are not valid as a React child (found: [object Promise])

React无法知道您使用了

async

关键字。它只知道您从呈现中返回了一个不受支持的承诺。该承诺可能是由

async

函数创建的，也可能不是

---

所以它做了它能做的：告诉你不能返回对象（承诺就是对象），然后记录导致问题的对象。

因为React并不关心您是否专门使用了

异步

函数；非

异步

函数返回承诺也会是一个问题，原因完全相同。谢谢，但在我的函数返回中，我只返回了一个div

hello

，而不是承诺？我读到“异步”这个词函数之前意味着一件简单的事情：函数总是返回一个承诺。

async

函数总是返回承诺。

async

函数总是返回承诺。承诺将解析为您在代码中返回的任何值。

async

和

等待关键字的存在为我们提供了更方便的语法来处理承诺。