疑惑
相信刚开始使用react函数组件的小伙伴也遇到过一个坑,就是 useState 更新状态是异步更新的,但是react 并没有提供关于这个问题的解决方案。那我们能否使用自己的方法来解决这个问题呢?答案肯定是可以的。
状态异步更新带来的问题
就拿一个比较常见的场景来说。在react项目中,我们想在关闭对话框后再去处理其他业务。但是 useState 的状态是异步更新的。我们通过setVisible 更新状态后,状态并没有立马更新,这也就说明对话框并没有关闭,这也就造成了我们后面的逻辑在对话框没关闭时就执行了,这并不是我们想要的结果。下面来看我是如何来巧妙的解决这个问题的。
函数式组件解决方案
使用定时器
点击显示对话框,并且给form表单给与初始值。不用定时器的话,对话框还未渲染,自然获取不到里面的form ref。
// 展示对话框
const showModal2 = (item) => {
// todo why???
setIsModalOpen2(true) //异步
setTimeout(() => {
updateRormRef.current.setFieldsValue(item) //给form表单给与初始值
}, 0)
console.log(item)
}
类组件解决方案
在类组件中,我们可以在 setState(newstate,callback) 第二个参数传一个回调来处理本次状态更新后的一些其他业务。
原文地址:http://www.cnblogs.com/coderz1/p/16836432.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性