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

规格:

“反应”:“^ 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值放入分派时，一切都开始正常工作。

如果你在项目中使用Firebase的任何文件。 然后把import firebase语句放在最后!!

我知道这听起来很疯狂，但是试试吧!!

由于错误，react认为您正在尝试显示“li”的对象，但实际上您并没有这样做。

你在错误的地方使用了“绑定”方法。当你在“li”中使用bind时，“this”将被认为是“li”的对象。由于object有一个额外的关键字(onItemClick)，因此它不是一个react标签，它是一个具有react li标签属性的js对象。

如果你在Component的构造函数中使用'bind'方法 不会有问题的。但在您的用例中，这是不可能的。所以“(e) => onItemClick(e, item)”是最好的尝试。

忽略我糟糕的英语。

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

Found:带有键的对象

这意味着你传递的是一个键值。所以你需要修改你的处理程序:

onItemClick(e, item) {
   this.setState({
     lang: item,
   });
}

onItemClick({e, item}) {
  this.setState({
    lang: item,
  });
}

您漏掉了大括号({})。

我也得到了这个“对象是无效的React子”错误，对我来说，原因是在我的JSX调用异步函数。见下文。

class App extends React.Component {
    showHello = async () => {
        const response = await someAPI.get("/api/endpoint");

        // Even with response ignored in JSX below, this JSX is not immediately returned, 
        // causing "Objects are not valid as a React child" error.
        return (<div>Hello!</div>);
    }

    render() {
        return (
            <div>
                {this.showHello()}
            </div>
        );
    }
}

我了解到React不支持异步渲染。React团队正在研究如下所示的解决方案。