不变违规：对象作为React子项无效
在我的组件的渲染function，我有：
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子无效（find：具有键的对象{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附加组件中的createFragment（object）来包装该对象。 检查
Welcome的渲染方法。
如果我更改为this.onItemClick.bind(this, item)到(e) => onItemClick(e, item)在map函数内，一切都按预期工作。
如果有人可以解释我做错了什么，并解释为什么我得到这个错误，会很好
更新1：
onItemClick函数如下，删除this.setState导致错误消失。
onItemClick(e, item) { this.setState({ lang: item, }); }
但我不能删除这一行，因为我需要更新这个组件的状态
我有这个错误，事实certificate，我无意间在我的JSX代码中包含一个对象，我期望它是一个string值：
return ( <BreadcrumbItem href={routeString}> {breadcrumbElement} </BreadcrumbItem> )
breadcrumbElement曾经是一个string，但由于重构已成为一个对象。 不幸的是，React的错误信息并没有把我指向问题所在的路线。 我不得不一直追踪我的堆栈跟踪，直到我认识到“道具”被传入一个组件，然后我发现了有问题的代码。
所以当我尝试显示一个Date对象的createdAt属性时，我得到了这个错误。 如果像这样在末尾连接.toString() ，它将执行转换并消除错误。 只要发表这个作为一个可能的答案，以防其他人遇到同样的问题：
{this.props.task.createdAt.toString()}
我刚刚得到了同样的错误，但由于不同的错误：我使用双大括号，如：
{{count}}
插入count的值而不是正确的值：
{count}
编译器推测它变成了{{count: count}} ，即试图插入一个Object作为React子元素。
只是以为我会添加到这一点，因为我今天有同样的问题，事实certificate，这是因为我只是返回的function，当我把它包装在一个<div>标签开始工作，如下
renderGallery() { const gallerySection = galleries.map((gallery, i) => { return( <div> ... </div> ); }); return ( {gallerySection} );
}
上面导致了错误，将return（）部分更改为：
return ( <div> {gallerySection} </div> );
解决了这个问题
我不得不忘记把道具上的花括号放在一个表象上：
之前：
const TypeAheadInput = (name, options, onChange, value, error) => {
后
const TypeAheadInput = ({name, options, onChange, value, error}) => {
你只是使用对象的键，而不是整个对象！
更多细节可以在这里find： https ： //github.com/gildata/RAIO/issues/48
import React, { Component } from 'react'; import PropTypes from 'prop-types'; class SCT extends Component { constructor(props, context) { super(props, context); this.state = { data: this.props.data, new_data: {} }; } componentDidMount() { let new_data = this.state.data; console.log(`new_data`, new_data); this.setState( { new_data: Object.assign({}, new_data) } ) } render() { return ( <div> this.state.data = {JSON.stringify(this.state.data)} <hr/> <div style={{color: 'red'}}> {this.state.new_data.name}<br /> {this.state.new_data.description}<br /> {this.state.new_data.dependtables}<br /> </div> </div> ); } } SCT.propTypes = { test: PropTypes.string, data: PropTypes.object.isRequired }; export {SCT}; export default SCT;
<script src="ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
我只是把自己的这个错误的一个非常愚蠢的版本，我可以在这里分享后代。
我有这样的一些JSX：
... { ... <Foo /> ... } ...
我需要评论这个debugging的东西。 我在我的IDE中使用了键盘快捷键，结果是：
... { ... { /* <Foo /> */ } ... } ...
当然，这是无效的 – 对象作为反应的孩子是无效的！
