初學React，setState后獲取到的thisstate沒變，還是初始state？

問題：(javascript)初學React，setState后獲取到的thisstate沒變，還是初始state？
描述:

 

          getInitialState(){
            return {data:[]};
          },
          componentDidMount(){
            var data = [ { author: "Pete Hunt", text: "This is one comment" },
                         { author: "Jordan Walke", text: "This is *another* comment" } ];
            (function(data){
              this.setState({data:data});
              console.log(this.state.data);
            }).call(this,data);
          },

為什么log里打出來的data是[]呢？

this.setState 是在 render 時, state 才會改變調用的, 也就是說, setState 是異步的. 組件在還沒有渲染之前, this.setState 還沒有被調用.這么做的目的是為了提升性能, 在批量執行 State 轉變時讓 DOM 渲染更快.

另外, setState 函數還可以將一個回調函數作為參數, 當 setState 執行完並且組件重新渲染之后. 這個回調函數會執行, 因此如果你想查看通過 setState 改變后的 state, 可以這樣寫:

 

this.setState({myState: nextState}, ()=>{console.log(this.state.myState)})

---

解決方案1:

React 的 setState 是異步執行的，所以你后面立即 console 是還沒改變狀態， setState 函數接受兩個參數，一個是一個對象，就是設置的狀態，還有一個是一個回調函數，就是設置狀態成功之后執行的，你可以這樣：

(function(data){
   var that = this;
   this.setState({data:data}, function () {
       console.log(that.state.data);
   });
}).call(this,data);

 

解決方案2:

不能立即 console.log(this.state.data);的，你可以在 render方法里取

解決方案3:

善用官方文檔：

void setState(
  function|object nextState,
  [function callback]
)

The second (optional) parameter is a callback function that will be executed once setState is completed and the component is re-rendered.

所以正確做法是

this.setState(
    Object.assign({}, { data }),
    () => console.log(this.state)
)