การละเมิดค่าคงที่ที่ไม่ถูกตรวจจับ: 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: Objects are not valid as a React child (พบ: object with Keys {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 ให้การเรียกฟังก์ชัน mapper ของคุณโดยแต่ละรายการในอาร์เรย์เป็นพารามิเตอร์ตัวแรกและดัชนีเป็นพารามิเตอร์ตัวที่สอง ลองทำตามขั้นตอนต่อไปนี้

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

person harun    schedule 11.03.2016