setTimeout 和 setState 的关系

问题

今天遇到一个问题,业务场景是:表单详情页,用了antdForm组件,想在组件onChange时调用form.validateFields先校验数据再做提交,过程中,validateFields一直是延迟的状态,即填了值,在onChange中能拿到当前值,但是在validateFields的回调中还是上一次的值。在antdissue中找到了问题的原因。https://github.com/ant-design...关键答案是

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

原文链接:segmentfault.com

上一篇:vue-cli3 配置开发-测试环境
下一篇:关于echarts,数据使用setinterval定时刷新的问题

相关推荐

官方社区

扫码加入 JavaScript 社区