Uncaught Инвариантные Нарушения: reactjs, массив нагрузки

Question

ошибки должны это то, что я называю arrangemen

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(){ 
 
    \t return { tituloRopa:[ 
 
    \t \t \t {titulo:'ropa uno', ruta:'img/img1.jpg'}, 
 
\t \t \t {titulo:'ropa dos', ruta:'img/img2.jpg'}, 
 
\t \t \t {titulo:'ropa tres', ruta:'img/img3.jpg'}, 
 
    \t \t ]} 
 
    \t }, 
 
    render: function(){ 
 
    \t return(
 
    \t \t <header> 
 
    \t \t <div> 
 
    \t \t \t { 
 
    \t \t \t this.state.tituloRopa.map(function(titleRop, rutaRop, i){ 
 
    \t \t \t \t return(
 
    \t \t \t \t <Modulo5_ key={i} title={tituloRop} ruta={rutaRop}> 
 
             </Modulo5_> \t 
 
    \t \t \t \t) 
 
    \t \t \t }) 
 
    \t \t \t } 
 
    \t   </div> 
 
    \t \t </header> 
 
    \t \t) 
 
    \t } 
 

 
    })

и у меня есть эта ошибка: неперехваченных Инвариантного Нарушение: объекты не действуют, как Реагент ребенка (найдено: объект с ключами {titulo, ruta}). Если вы хотите отобразить коллекцию детей, используйте массив или оберните объект с помощью createFragment (object) из надстроек React. Проверьте метод рендеринга Modulo5_.

Answer 1

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

1. Реагировать компонент должен иметь только один корневой элемент

   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)

Example

Answer 2

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

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