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 讲得很透彻