Непойманное нарушение инварианта: reactjs, загрузка массива

ошибка должна быть в том, что я называю аранжировкой

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}). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив или оберните объект с помощью createFragment(object) из надстроек React. Проверьте метод рендеринга Modulo5_.


reactjs arrays json reactive-programming
person FERNANDO ORTIZ    schedule 11.03.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

В вашем коде есть несколько ошибок

  1. Компонент React должен иметь только один корневой элемент

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

  2. В .map первым аргументом является элемент обрабатывается в массиве, поэтому в данном случае это Object, поэтому вам нужно просто получить от него свойства, используя нотацию . (el.titulo)

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

Example

person Oleksandr T.    schedule 11.03.2016

arrow_upward
0
arrow_downward

Ваша анонимная функция на карте использует неверные параметры. Array.prototype.map дает вызовы вашей функции сопоставления с каждым элементом в массиве в качестве первого параметра и индексом в качестве второго параметра. Попробуйте следующее.

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

person harun    schedule 11.03.2016