Question

这个错误应该在我所说的安排中

＆＃13;

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

＆＃13;

我有这个错误：未捕获的不变违规：对象作为React子对象无效（找到：具有键{titulo，ruta}的对象）。如果您要渲染子集合，请使用数组，或使用React附加组件中的createFragment（object）包装对象。检查Modulo5_的呈现方法。

Answer 1

在你的代码中有几个错误

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因此您需要使用.表示法从中获取属性（{ {1}}）
```
el.titulo
```

Example

Answer 2

地图中的匿名函数使用不正确的参数。 Array.prototype.map调用mapper函数，数组中的每个项目作为第一个参数，索引作为第二个参数。请尝试以下方法。

＆＃13;

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

＆＃13;

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

2 个答案: