如果你把async放在一个函数组件(可以是一个玩笑和反应测试库测试的包装器，也可以是一个普通的旧函数组件)前面，就像这样:

const MockComponent = async () => {
  <Provider>
    <ComponentImGoingToTest />
  </Provider>
}

你期望能够像这样渲染它:

<MockComponent />

然后是两件事:

你不理解async的含义。 由于这个关键字，调用包装器函数将调用promise(它是一个对象)，而不是JSX归结为预期的React函数。

我只是让自己经历了一个非常愚蠢的错误版本，我不妨在这里为后代分享一下。

我有一些JSX是这样的:

...
{
  ...
  <Foo />
  ...
}
...

我需要注释掉它来调试一些东西。我在IDE中使用键盘快捷键，结果是这样的:

...
{
  ...
  { /* <Foo /> */ }
  ...
}
...

当然，这是无效的——对象作为react子对象是无效的!

我的问题是，在render()函数的return语句中，不必要地在一个包含HTML元素的变量周围加上花括号。这使得React将其视为对象而不是元素。

render() {
  let element = (
    <div className="some-class">
      <span>Some text</span>
    </div>
  );

  return (
    {element}
  )
}

一旦我从元素中移除花括号，错误就消失了，元素被正确呈现。

我的案例在使用reduce时很常见，但这里没有分享，所以我发布了它。

通常，如果你的数组是这样的:

[{值:1}，{值:2}]

你想要呈现这个数组中值的和。JSX代码如下所示

<div>{array.reduce((acc, curr) => acc.value + curr.value)}</div>

当数组只有一个项时，会出现这个问题，例如:[{value: 1}]。 (通常，当你的数组是来自服务器的响应时，这种情况发生，所以你不能保证数组中的项目数量)

当数组只有一个元素时，reduce函数返回元素本身，在这种情况下，它是{value: 1}(一个对象)，它会导致不变性违反:对象是无效的React子错误。

我有这个错误，原来是我无意中包括一个对象在我的JSX代码，我本以为是一个字符串值:

return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElement过去是一个字符串，但由于重构而变成了一个对象。不幸的是，React的错误消息并没有很好地将我指向存在问题的行。我必须一直跟踪堆栈跟踪，直到我识别出传递到组件中的“道具”，然后我找到了有问题的代码。

您需要引用对象的字符串值属性，或者将对象转换为所需的字符串表示形式。一个选项可能是JSON。stringify如果你真的想看到对象的内容。

试试这个

 {items && items.title ? items.title : 'No item'}