React 在Render的时候自动执行了onClick事件

写法有误

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

 

转载于:https://www.cnblogs.com/CoffeeEddy/p/10651085.html