javascript - 不变违规：对象作为React子元素无效(Invariant Violation: Objects are not valid as a React child)

Question

In my component's render function I have:

(在组件的render函数中，我有：)

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

everything renders fine, however when clicking the <li> element I receive the following error:

(一切正常，但是单击<li>元素时，出现以下错误：)

Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}).

(未捕获的错误：始终违反：对象作为React子对象无效（找到：带有键{dispatchConfig，dispatchMarker，nativeEvent，target，currentTarget，type，eventPhase，气泡，cancelable，timeStamp，defaultPrevented，isTrusted，视图，详细信息，screenX的对象，screenY，clientX，clientY，ctrlKey，shiftKey，altKey，metaKey，getModifierState，按钮，按钮，relatedTarget，pageX，pageY，isDefaultPrevented，isPropagationStopped，_dispatchListeners，_dispatchIDs}）。)

If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

(如果您打算渲染孩子的集合，请改用数组或使用React附加组件中的createFragment（object）包装对象。)

Check the render method of Welcome .

(检查Welcome的渲染方法。)

If I change to this.onItemClick.bind(this, item) to (e) => onItemClick(e, item) inside the map function everything works as expected.

(如果我将map函数内的this.onItemClick.bind(this, item)更改为(e) => onItemClick(e, item) ，一切都会按预期进行。)

If someone could explain what I am doing wrong and explain why do I get this error, would be great

(如果有人可以解释我在做什么错并解释为什么我会收到此错误，那将是很好的)

UPDATE 1:

(更新1：)

onItemClick function is as follows and removing this.setState results in error disappearing.

(onItemClick函数如下，删除this.setState导致错误消失。)

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

But I cannot remove this line as I need to update state of this component

(但是我无法删除此行，因为我需要更新此组件的状态)

  ask by almeynman translate from so

Answer 1

I was having this error and it turned out to be that I was unintentionally including an Object in my JSX code that I had expected to be a string value:

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

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

breadcrumbElement used to be a string but due to a refactor had become an Object.

(breadcrumbElement曾经是一个字符串，但是由于重构而成为对象。)

Unfortunately, React's error message didn't do a good job in pointing me to the line where the problem existed.

(不幸的是，React的错误消息不能很好地指出问题所在。)

I had to follow my stack trace all the way back up until I recognized the "props" being passed into a component and then I found the offending code.

(我必须一直跟踪堆栈跟踪，直到我意识到“ props”已传递到组件中，然后才发现有问题的代码。)

You'll need to either reference a property of the object that is a string value or convert the Object to a string representation that is desirable.

(您将需要引用对象的属性（它是字符串值），或者将Object转换为所需的字符串表示形式。)

One option might be JSON.stringify if you actually want to see the contents of the Object.

(如果您确实想查看Object的内容，则一个选项可能是JSON.stringify 。)