setTimeout 和 setState 的关系
栏目: JavaScript · 发布时间: 6年前
内容简介:今天遇到一个问题,业务场景是:表单详情页,用了Because,
问题
今天遇到一个问题,业务场景是:表单详情页,用了 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 讲得很透彻
以上所述就是小编给大家介绍的《setTimeout 和 setState 的关系》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 框架与RTTI的关系,RTTI与反射之间的关系
- 如何用循环关系网络机智地解决数独类关系推理任务?
- 【mybatis xml】数据层框架应用--Mybatis(三)关系映射之一对一关系映射
- Hibernate 关系映射整理
- Hibernate 关系映射整理
- 简单实用UML关系图解
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法设计与分析导论
R.C.T.Lee (李家同)、S.S.Tseng、R.C.Chang、Y.T.Tsai / 王卫东 / 机械工业 / 2008-1 / 49.00元
本书在介绍算法时,重点介绍用干设计算法的策略.非常与众不同。书中介绍了剪枝搜索、分摊分析、随机算法、在线算法以及多项式近似方案等相对较新的思想和众多基于分摊分析新开发的算法,每个算法都与实例一起加以介绍,而且每个例子都利用图进行详细解释。此外,本书还提供了超过400幅图来帮助初学者理解。本书适合作为高等院校算法设计与分析课程的高年级本科生和低年级研究生的教材,也可供相美科技人员和专业人七参考使用。一起来看看 《算法设计与分析导论》 这本书的介绍吧!