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

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

  return (
    {element}
  )
}

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

当您尝试将对象呈现为子元素时，可能会发生这种情况，您可以通过查找下面的场景找到根本原因。

Check if you are using any double braces in JSX - <span>{{value}}</span> and change it to <span>{value}</span> (I did this mistake since I just moved from Angular to React). Check of return statements wrapped around braces like below and remove it. render() { let element = ( <span>text</span> ); return ( {element} // => Remove this extra brace ) } Check any other unintentional way you are using object in the JSX let nestedObjected = { a : '1', b : { c: '2' } }; {Object.keys(nestedObjected).map((key) => { return ( <div> <span>{nestedObjected[key]}</span> // This will cause issue since it will resolve to an object </div> ); })}

我只是得到了相同的错误，但由于不同的错误:我使用了双括号，如:

{{count}}

插入count的值而不是正确的值:

{count}

编译器可能将其转换为{{count: count}}，即试图将一个对象作为React子对象插入。

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

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

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

<MockComponent />

然后是两件事:

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

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

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

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

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

多亏了zerkms的评论，我才注意到我的愚蠢错误:

我有onItemClick(e，项目)当我应该有onItemClick(项目，e)。