我遇到了这个错误，结果是我无意中在我的 JSX 代码中包含了一个我希望是字符串值的对象：

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

breadcrumbElement曾经是一个字符串，但由于重构已经变成了一个对象。不幸的是，React 的错误消息并没有很好地将我指向存在问题的那一行。我不得不一直跟踪我的堆栈跟踪，直到我认识到“props”被传递到组件中，然后我找到了有问题的代码。

您需要引用作为字符串值的对象的属性，或者将对象转换为所需的字符串表示形式。一种选择可能是JSON.stringify您是否真的想要查看对象的内容。

因此，在尝试显示createdAt作为 Date 对象的属性时出现此错误。如果.toString()像这样在最后连接，它将进行转换并消除错误。只需将此作为可能的答案发布，以防其他人遇到同样的问题：

{this.props.task.createdAt.toString()}

我刚刚遇到了同样的错误，但由于不同的错误：我使用了双大括号，例如：

{{count}}

插入值count而不是正确的：

{count}

编译器大概变成了{{count: count}}，即试图插入一个对象作为 React 子对象。

只是想我会添加到这个，因为我今天遇到了同样的问题，结果是因为我只返回函数，当我将它包装在一个<div>标签中时它开始工作，如下所示

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

以上导致了错误。我通过将return()部分更改为：

return (
  <div>
    {gallerySection}
  </div>
);

...或者简单地说：

return gallerySection

React child(singular)应该是原始数据类型而不是对象，或者它可以是 JSX 标签（在我们的例子中不是）。在开发中使用 Proptypes 包以确保进行验证。

只是一个快速的代码片段（JSX）比较来代表你的想法：

1. 错误：将对象传递给子对象

   <div>
   {/* item is object with user's name and its other details on it */}
    {items.map((item, index) => {
     return <div key={index}>
   --item object invalid as react child--->>>{item}</div>;
    })}
   </div>
   

2. 没有错误：将对象的属性（应该是原始值，即字符串值或整数值）传递给子级。

   <div>
    {/* item is object with user's name and its other details on it */}
     {items.map((item, index) => {
      return <div key={index}>
   --note the name property is primitive--->{item.name}</div>;
     })}
   </div>
   

TLDR；（来自下面的来源）：使用 React 时，请确保您在 JSX 中呈现的所有项目都是基元而不是对象。这个错误的发生通常是因为一个参与调度事件的函数被赋予了一个意外的对象类型（即当你应该传递一个字符串时传递一个对象）或者你的组件中的部分 JSX 没有引用一个原语（即 this.props与 this.props.name）。

来源 - codingbismuth.com