我有同样的问题，因为我没有把道具放在花括号里。

export default function Hero(children, hero ) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

所以如果你的代码和上面的类似，你就会得到这个错误。 要解决这个问题，只需在道具周围加上花括号。

export default function Hero({ children, hero }) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

React子(单数)应该是基本数据类型的类型而不是对象，或者它可以是JSX标记(这不是在我们的情况下)。在开发中使用Proptypes包以确保进行验证。

只是一个快速的代码片段(JSX)比较，以代表您的想法:

Error : With object being passed into child <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> Without error : With object's property(which should be primitive, i.e. a string value or integer value) being passed into child. <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;(来自下面的源代码):确保你在JSX中呈现的所有项都是原语，而不是使用React时的对象。发生此错误通常是因为分派事件的函数被赋予了一个意外的对象类型(即当您应该传递字符串时传递了一个对象)或组件中的JSX部分没有引用原语(即此。Props vs . this.props.name)。

Source - codingbismuth.com

只需创建一个有效的JSX元素。在我的例子中，我将一个组件分配给一个对象。

const AwesomeButtonComponent = () => <button>AwesomeButton</button>
const next = {
  link: "http://awesomeLink.com",
  text: "Awesome text",
  comp: AwesomeButtonComponent
}

在我的代码的其他地方，我想动态分配那个按钮。

return (
  <div>
    {next.comp ? next.comp : <DefaultAwesomeButtonComp/>}
  </div>
)

我通过声明一个通过props comp初始化的JSX comp来解决这个问题。

const AwesomeBtnFromProps = next.comp
return (
  <div>
    {next.comp ? <AwesomeBtnFromProps/> : <DefaultAwesomeButtonComp/>}
  </div>
)

在我的例子中，我向我的子函数组件添加了一个async，并遇到了这个错误。不要使用带有子组件的async。

如果出于某种原因你导入了firebase。然后尝试运行npm i—save firebase@5.0.3。这是因为firebase破坏反应本机，所以运行这个将修复它。

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

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> ); })}