未捕获的不变违规：reactjs，加载数组答案

【问题标题】：Uncaught Invariant Violation: reactjs, load array未捕获的不变违规：reactjs，加载数组
【发布时间】：2016-06-26 12:36:22
【问题描述】：

这个错误应该是我所谓的安排人员

var Modulo5_ = React.createClass({ 
render: function() {
  return(
       <img src={this.props.ruta} className="img-responsive" />
       <p>{this.props.title}</p>
)
}) 

var Modulo5 = React.createClass({ 
    getInitialState: function(){
    	return { tituloRopa:[
    			{titulo:'ropa uno', ruta:'img/img1.jpg'},
			{titulo:'ropa dos', ruta:'img/img2.jpg'},
			{titulo:'ropa tres', ruta:'img/img3.jpg'},
    		]}
    	},
    render: function(){
    	return(
    		<header>
    		   <div>
    			 {
    			   this.state.tituloRopa.map(function(titleRop, rutaRop,  i){
    				return(
    				  <Modulo5_ key={i} title={tituloRop} ruta={rutaRop}>
                                      </Modulo5_>	
    				)
    			   })
    			 }
    	           </div>
    		 </header>
    		)
    	}

    })

我有这个错误： Uncaught Invariant Violation：对象作为 React 子对象无效（发现：带有键 {titulo, ruta} 的对象）。如果您打算渲染一组子项，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查Modulo5_的渲染方法。

【问题讨论】：

标签： arrays json reactjs reactive-programming

【解决方案1】：

您在地图中的匿名函数使用了不正确的参数。 Array.prototype.map 调用你的映射器函数，数组中的每个项目作为第一个参数，索引作为第二个参数。试试下面的。

   this.state.tituloRopa.map(function(item,  i){
	return(
	  <Modulo5_ key={i} title={item.tituloRop} ruta={item.rutaRop}></Modulo5_>	
	)
   })

【讨论】：

【解决方案2】：

在你的代码中有几个错误

React 组件必须只有一个根元素

var Modulo5_ = React.createClass({ 
  render: function() {
     return <div>
       <img src={this.props.ruta} className="img-responsive" />
       <p>{this.props.title}</p>
     </div>
  }
})

在.map 中，第一个参数是数组中正在处理的元素，所以在这种情况下它是Object，因此您只需使用. 表示法（el.titulo）从中获取属性
```
{this.state.tituloRopa.map(function(el,  i) {
   return <Modulo5_ key={i} title={el.titulo} ruta={el.ruta } />
})}
```

Example

【讨论】：