Android攻城狮前端遇坑指南

持续更新

1.按钮未点击自动执行点击事件

handlerClick = (questionId)=>{
    console.log('我执行了')
}
<button type="button"
   onClick={
    this.handlerClick(question_id)
  }>补习详情
</button>
复制代码

handlerClick (questionId){
    console.log('我被点击了')
}
<button type="button"
   onClick={
    this.handlerClick.bind(this,question_id)
  }>补习详情
</button>
复制代码

第一种和第二种是两种常见的函数定义方法，第一种是箭头函数，第二种是普通函数。推荐用箭头函数

• 避免普通函数this造成的一系列问题，而箭头函数this指向函数定义的组件
• 每次刷新组件都会重新执行bind方法，对性能有影响

但是第一种箭头函数确带来了奇怪的问题：按钮未点击handlerClick函数自动执行了，而不传参数的话是不会自动执行的，这是为什么？明明看起来两种写法差不多！在讲这个问题之前我们首先来看一下匿名函数

function (){
    console.log('我执行了')
}
复制代码

忽略箭头函数的内部细节，我们发现其实箭头函数就是匿名函数。再来看看匿名函数是如何执行的

（function (){
    console.log('我执行了')
}）（）
复制代码

聪明的你应该发现问题了，第一种箭头函数传参就相当于匿名函数立即执行。讲清楚了为什么会立即执行，看下如何解决

<button type="button"
   onClick={()=>{
       this.handlerClick(question_id)
   }
  }>补习详情
</button>
复制代码

这有什么区别？第一种箭头函数的写法等价于

onClick=(function(){
    console.log('我执行了') 
})(questionId)
复制代码

第二种等价于

onClick=function(){
    return function handlerClick(questionId){
        console.log('我执行了') 
    }
}
复制代码

那么bind为什么不会立即执行？因为bind返回的还是函数

2.ant Design Select组件的坑

<Select defaultValue={0} onChange={this.handleClasses} className="selectClasses">
   {
   allClass.map((value, index) =>
          <Select.Option value={index}>{value.class_name}</Select.Option>
       )
    }
</Select>
复制代码

开始allClass是空数组，等到网络请求返回allClass才有数据，然后组件会刷新。这时候很奇怪defaultValue没有刷新，莫名其妙的设置不了默认数据。会出现下图所示的情况

下面的写法可以避免这种情况

{
 allClass.length !== 0 ?
   <Select defaultValue={0} onChange={this.handleClasses} className="selectClasses">
    {
      allClass.map((value, index) =>
       <Select.Option value={index}>{value.class_name}</Select.Option>
      )
    }
   </Select> : <div/>
}
复制代码

这种写法更优雅

{
 allClass.length !== 0 &&
   <Select defaultValue={0} onChange={this.handleClasses} className="selectClasses">
    {
      allClass.map((value, index) =>
       <Select.Option value={index}>{value.class_name}</Select.Option>
      )
    }
   </Select>
}
复制代码