setTimeout 和 setState 的關係

問題

今天遇到一個問題，業務場景是：表單詳情頁，用了antd的Form組件，想在組件onChange時調用form.validateFields先校驗數據再作提交，過程當中，validateFields一直是延遲的狀態，即填了值，在onChange中能拿到當前值，可是在validateFields的回調中仍是上一次的值。在antd的issue中找到了問題的緣由。https://github.com/ant-design... 關鍵答案是

Because, setState is asynchronously.

解決方案

issue 中並無提到解決方案，後來經過嘗試用setTimeout解決了這個問題。
相關代碼連接: https://codesandbox.io/s/unru...
關鍵代碼

handleSelectChange = value => {
    console.log(value);
    this.props.form.validateFields(["gender"], (errors, values) => {
      console.log("inner not setTimeout", values);
    });
    setTimeout(() => {
      this.props.form.validateFields(["gender"], (errors, values) => {
        console.log("inner is setTimeout", values);
      });
    }, 0);
  };

可見 setTimeout後拿到的值是才正確的。

解釋

一個很重要的概念：js是單線程的，單線程就意味着，全部任務須要排隊，前一個任務結束，纔會執行後一個任務。若是前一個任務耗時很長，後一個任務就不得不一直等着。空閒時，state 已經更新完成。
解析setTimeout時間設置爲0 推薦這篇文章對setTimeout 講得很透徹