只需删除组件中的async关键字。

const Register = () => {

这之后就没有问题了。

正如我所经历的一样，除了添加“__html”来标记它之外，我通过将标记的HTML放入具有属性“dangerlysetinnerhtml”的span中来解决，如下所示:

  createMarkup(innerHtml){
    return {__html: innerHtml};
  }

  render = () => {
    return (
      <span dangerouslySetInnerHTML={
      this.createMarkup(this.props.details.entryContent)}/>
    );
  }

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

规格:

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

不变的违反:对象无效的React子发生在我使用一个组件时，需要一个renderItem道具，如:

renderItem={this.renderItem}

我的错误是使我的renderItem方法异步。

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

我的案例在使用reduce时很常见，但这里没有分享，所以我发布了它。

通常，如果你的数组是这样的:

[{值:1}，{值:2}]

你想要呈现这个数组中值的和。JSX代码如下所示

<div>{array.reduce((acc, curr) => acc.value + curr.value)}</div>

当数组只有一个项时，会出现这个问题，例如:[{value: 1}]。 (通常，当你的数组是来自服务器的响应时，这种情况发生，所以你不能保证数组中的项目数量)

当数组只有一个元素时，reduce函数返回元素本身，在这种情况下，它是{value: 1}(一个对象)，它会导致不变性违反:对象是无效的React子错误。