react中useState状态异步更新的问题

疑惑

相信刚开始使用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) 第二个参数传一个回调来处理本次状态更新后的一些其他业务。