不变冲突:对象作为React子级无效
在我的组件的呈现函数中，我有：
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，target，currentTarget，type，eventPhase，bubbles，cancelable，timeStamp，defaultPrevented，isTrusted，view，detail，screenX，screenY，clientX，clientY，ctrlKey，shiftKey，altKey，metaKey，getModifierState，button，buttons，relatedTarget，#EN19#，#EN20#，#EN21#，#EN22#，#EN23#，#EN24#})。如果要渲染子对象的集合，请使用数组，或者使用React附加组件中的createFragment( object )包装对象。检查
Welcome的render方法。
如果我在map函数中将this.onItemClick.bind(this, item)改为(e) => onItemClick(e, item)，一切都会正常工作。
如果有人能解释我做错了什么，并解释为什么我会得到这个错误，那就太好了
更新1：
onItemClick函数如下所示，删除this.setState会导致错误消失。
onItemClick(e, item) {
this.setState({
lang: item,
});
}但我不能删除此行，因为我需要更新此组件的状态
回答 46
Stack Overflow用户
发布于 2015-11-07 08:27:43
我遇到了这个错误，结果是我无意中在JSX代码中包含了一个我认为是字符串值的对象：
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)breadcrumbElement曾经是一个字符串，但由于重构而变成了一个对象。不幸的是，React的错误消息并没有很好地指出问题所在。我不得不一直跟踪我的堆栈跟踪，直到我识别出传递给组件的“道具”，然后我找到了有问题的代码。
您需要引用作为字符串值的对象的属性，或者将对象转换为所需的字符串表示形式。如果您实际上想要查看对象的内容，一个选项可能是JSON.stringify。
Stack Overflow用户
发布于 2016-04-16 04:19:20
因此，我在尝试显示createdAt属性时遇到此错误，该属性是一个日期对象。如果您像这样在末尾连接.toString()，它将执行转换并消除错误。只是把这个作为一个可能的答案，以防其他人遇到同样的问题：
{this.props.task.createdAt.toString()}Stack Overflow用户
发布于 2016-06-12 17:07:42
我只是得到了相同的错误，但由于不同的错误:我使用了双花括号，如：
{{count}}要插入count的值而不是正确的值：
{count}编译器可能会将其转换为{{count: count}}，即试图插入一个对象作为React子级。
https://stackoverflow.com/questions/33117449
复制相似问题
腾讯云开发者
