React.js解決setState的異步問題

由於react中把setState設置爲異步操作函數，這有時候會給我們帶來以一些問題，下面介紹一下怎麼解決這個問題。

1. 在setState完成的回調裏執行需要的操作

setState函數的第二個參數允許傳入回調函數，在狀態更新完畢後進行調用，譬如：

this.setState({

      load: !this.state.load,

      count: this.state.count + 1

    }, () => {

          console.log(this.state.count);

          console.log('加載完成')

    });

2. 傳入狀態計算函數

除了使用回調韓式的方式監聽狀態更新結果之外，react還允許我們傳入某個狀態計算函數而不是對象作爲第一個參數。狀態計算函數能夠爲我們提供可依賴的組件的state與props值，即會自動的將我們的狀態更新操作添加到隊列中並等待前面的更新完畢後傳入更新的狀態值：

this.setState(function(prevState, props){

           return {需要改變的state的名稱: 改變之後的state的值}

});

 

這裏我們以簡單的計數器爲例，我們希望用戶點擊按鈕之後將計數值連加兩次,

直觀的寫法我們可以連續調用兩次setState函數，這邊的用法可能看起來有點怪異，不過更多的是爲了說明異步更新帶來的數據不可預測問題。

  incrementCount(){
    this.setState({count : this.state.count + 1}) 
    this.setState({count : this.state.count + 1})
  }

上述代碼的效果是每次點擊之後計數值只會加1，實際上第二個setState並沒有等待第一個setState執行完畢就開始執行了，因此其依賴的當前計數值完全是錯的。我們當然可以使用上文提及的setStateAsync來進行同步控制，不過這裏我們使用狀態計算函數來保證同步性：

  incrementCount(){
   this.setState((prevState, props) => ({
      count: prevState.count + 1
    }));
   this.setState((prevState, props) => ({
      count: prevState.count + 1
    }));
  }

這裏的第二個setState傳入的prevState值就是第一個setState執行完畢之後的計數值，也順利保證了連續自增兩次。