不变冲突：对象作为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>
    );
  }

所有内容都显示良好，但单击

元素时，我会收到以下错误：

未捕获得错误：不变冲突：对象作为React子级无效（找到：具有键得对象{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,如果您打算呈现子级集合，请使用数组，或者使用React加载项中的createFragment（object）包装对象。检查welcome的render方法。

如果我将this.onItemClick.bind（this,item)更改为(e)=>onItemClick(e,item)在html" target="_blank">map函数内部，所有工作都按预期进行。

如果有人能解释我做错了什么，解释为什么我会犯这个错误，那就太好了

更新1:
onItemClick函数如下所示，删除This.SetState将导致错误消失。

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

Answer 1

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

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

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

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