Invariant Violation：对象作为 React 子对象无效

Question

在我的组件的渲染功能中，我有：

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

一切都很好，但是当单击 <li> 元素时，我收到以下错误：

未捕获的错误：不变违规：对象作为 React 无效

孩子（找到：对象与键 {dispatchConfig，dispatchMarker，

nativeEvent, 目标, currentTarget, 类型, eventPhase, 气泡,

cancelable, timeStamp, defaultPrevented, isTrusted, view, detail,

screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey,

metaKey，getModifierState，按钮，按钮，relatedTarget，pageX，

pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners,

_dispatchIDs}）。如果您打算渲染一组子项，请改用数组或使用 createFragment(object) from 包装对象

React 附加组件。检查 Welcome 的渲染方法。

如果我在 map 函数 this.onItemClick.bind(this, item) 更改为 (e) => onItemClick(e, item) ，一切都会按预期工作。

如果有人可以解释我做错了什么并解释为什么我会收到这个错误，那就太好了

更新 1：

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

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

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

原文由 almeynman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到了这个错误，结果证明我无意中在我的 JSX 代码中包含了一个我原以为是字符串值的对象：

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

breadcrumbElement 曾经是一个字符串，但由于重构变成了一个对象。不幸的是，React 的错误消息并没有很好地将我指向存在问题的那一行。我必须一直跟踪我的堆栈跟踪，直到我识别出传递到组件中的“道具”，然后我找到了有问题的代码。

您需要引用作为字符串值的对象的属性，或者将对象转换为所需的字符串表示形式。如果您真的想查看对象的内容，一个选项可能是 JSON.stringify 。

原文由 Code Commander 发布，翻译遵循 CC BY-SA 4.0 许可协议