setTimeout 和 setState 的关系

1

问题

今天遇到一个问题,业务场景是:表单详情页,用了antdForm组件,想在组件onChange时调用form.validateFields先校验数据再做提交,过程中,validateFields一直是延迟的状态,即填了值,在onChange中能拿到当前值,但是在validateFields的回调中还是上一次的值。在antdissue中找到了问题的原因。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);
  };

clipboard.png
可见 setTimeout后拿到的值是才正确的。

解释

一个很重要的概念:js是单线程的,单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。空闲时,state 已经更新完成。
解析setTimeout时间设置为0 推荐这篇文章对setTimeout 讲得很透彻


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

afc163 · 5月17日

这个场景不应该用 setTimeout,应该用 onValuesChange

具体见:https://github.com/ant-design...

+1 回复

载入中...