Pelanggaran Invarian yang Tidak Tertangkap: reactjs, memuat array

kesalahannya seharusnya ini dalam apa yang saya sebut pengaturan

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

    })

dan saya mendapat kesalahan ini: Pelanggaran Invarian Tidak Tertangkap: Objek tidak valid sebagai anak Bereaksi (ditemukan: objek dengan kunci {titulo, ruta}). Jika Anda bermaksud merender kumpulan turunan, gunakan array atau bungkus objek menggunakan createFragment(object) dari add-on React. Periksa metode render Modulo5_.


reactjs arrays json reactive-programming
person FERNANDO ORTIZ    schedule 11.03.2016    source sumber

Jawaban (2)


arrow_upward
2
arrow_downward

Ada beberapa kesalahan dalam kode Anda

  1. Komponen React hanya boleh memiliki satu elemen root

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

  2. Dalam .map argumen pertama adalah elemen diproses dalam array, jadi dalam hal ini adalah Object oleh karena itu Anda hanya perlu mendapatkan properti darinya menggunakan notasi .(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

Fungsi anonim Anda di peta menggunakan parameter yang salah. Array.prototype.map memanggil fungsi mapper Anda dengan setiap item dalam array sebagai parameter pertama dan indeks sebagai parameter kedua. Coba yang berikut ini.

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

person harun    schedule 11.03.2016