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

对于那些提到Stringify()和toString()作为解决方案的人，我会说这对我有用，但我们必须理解问题以及为什么会发生。在我的代码中，这是一个简单的问题。我有2个按钮调用相同的函数，但其中一个按钮没有正确地将参数传递给该函数。

我的问题很简单，当我面对以下错误:

objects are not valid as a react child (found object with keys {...}

只是，我正在传递一个对象与错误中指定的键，而试图直接在组件中使用{object}渲染对象，期望它是一个字符串

object: {
    key1: "key1",
    key2: "key2"
}

当在React组件上渲染时，我使用了如下所示的东西

render() {
    return this.props.object;
}

但它本该如此

render() {
    return this.props.object.key1;
}

我想在这个列表中添加另一个解决方案。

规格:

“反应”:“^ 16.2.0”, :“react-dom ^ 16.2.0”, :“react-redux ^ 5.0.6”, :“react-scripts ^ 1.0.17”, “终极版”:“^ 3.7.2章”

我也遇到了同样的错误:

未捕获错误:对象作为React子对象无效(found: object 键{XXXXX})。如果你想把一群孩子， 使用数组代替。

这是我的代码:

let payload = {
      guess: this.userInput.value
};

this.props.dispatch(checkAnswer(payload));

解决方案:

  // let payload = {
  //   guess: this.userInput.value
  // };

this.props.dispatch(checkAnswer(this.userInput.value));

出现这个问题是因为负载将项目作为对象发送。当我删除有效负载变量并将userInput值放入分派时，一切都开始正常工作。

所发生的是您试图实现的onClick函数立即被执行。 因为我们的代码不是HTML，它是javascript，所以它被解释为一个函数执行。 onClick函数接受函数作为参数，而不是函数执行。

const项=[“EN”,“它”,“FR”、“GR”,“俄罗斯”). map((项)= > { 返回(<李onClick = {(e) = > onItemClick (e,项)}关键={项}>{项}< /李>); })；

这将在List Item上定义一个onClick函数，该函数将在单击它后执行，而不是在组件呈现时立即执行。

我在三元运算符中得到了一个错误。 我做了什么:

render(){
  const bar = <div>asdfasdf</div>
  return ({this.state.foo ? {bar} : <div>blahblah</div>})
}

结果是它应该是没有括号的bar，比如:

render(){
  const bar = <div>asdfasdf</div>
  return ({this.state.foo ? bar : <div>blahblah</div>})
}