写法有误
1 { 2 this.state.baseLayers.length>0?( 3 this.state.baseLayers.map(item => { 4 return ( 5 <div key={item.id}> 6 <BaseMapItem theme={item.img} onClick={this.baseMapChange(item.id)}/> 7 <div style={{textAlign:‘center‘}}>{item.name}</div> 8 </div> 9 ) 10 }) 11 ): 12 ( 13 <div>没有图层数据...</div> 14 ) 15 }
我的绑定事件想要直接带着参数item.id去执行，这是不允许的，恰好我的baseMapChange事件里面有setState，导致溢出了，不然我可能还发现不了这个问题
解决方案一：
1 { 2 this.state.baseLayers.length>0?( 3 this.state.baseLayers.map(item => { 4 return ( 5 <div key={item.id}> 6 <BaseMapItem theme={item.img} onClick={this.baseMapChange.bind(this,item.id)}/> 7 <div style={{textAlign:‘center‘}}>{item.name}</div> 8 </div> 9 ) 10 }) 11 ): 12 ( 13 <div>没有图层数据...</div> 14 ) 15 }
解决方案二：
{ this.state.baseLayers.length>0?( this.state.baseLayers.map(item => { return ( <div key={item.id}> <BaseMapItem theme={item.img} onClick={（）=> this.baseMapChange(item.id)}/> <div style={{textAlign:‘center‘}}>{item.name}</div> </div> ) }) ): ( <div>没有图层数据...</div> ) }
React 在Render的时候自动执行了onClick事件
原文：https://www.cnblogs.com/CoffeeEddy/p/10651085.html