持續更新

1.寫程式碼過程中webstorm底部一直閃爍，程式碼也提示不了

File->Invalidate Cahes/Restart -> Invalidate and Restart
複製程式碼

2.按鈕未點選自動執行點選事件

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返回的還是函式

3.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>
}
複製程式碼