解决react中useState状态异步更新的问题.docxVIP

第

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

目录疑惑状态异步更新带来的问题问题示例问题解决类组件的解决方案函数组件的解决方案其他解决方案结尾

疑惑

相信刚开始使用react函数组件的小伙伴也遇到过一个坑，就是useState更新状态是异步更新的，但是react并没有提供关于这个问题的解决方案。那我们能否使用自己的方法来解决这个问题呢？答案肯定是可以的。

状态异步更新带来的问题

就拿一个比较常见的场景来说。在react项目中，我们想在关闭对话框后再去处理其他业务。但是useState的状态是异步更新的。我们通过setVisible更新状态后，状态并没有立马更新，这也就说明对话框并没有关闭，这也就造成了我们后面的逻辑在对话框没关闭时就执行了，这并不是我们想要的结果。下面来看我是如何来巧妙的解决这个问题的。

问题示例

//App.tsx

import{useState}fromreact

exportdefault()={

const[num,setNum]=useState(0)

constadd=()={

console.log(更新前,num)

setNum(num+1)

console.log(更新后,num)

return(

divclassName=App

p{num}/p

buttonadd}num++/button

/div

下面是上面组件运行结果：

点击按钮后的运行结果：

当我们点击按钮时的打印结果：

问题解决

类组件的解决方案

在类组件中，我们可以在setState(newstate,callback)第二个参数传一个回调来处理本次状态更新后的一些其他业务。但是在函数组件中我们如何来解决这个问题呢？来看以下方案，也是我们这篇文章主要想为大家解决的问题。

函数组件的解决方案

解决该问题使用到的api有：useEffect，Promise

1.在项目源码目录下创建文件夹customHooks，然后在customHooks/useCallbackState.ts中编写如下代码：

import{useState,useRef,useEffect}fromreact;

exportdefault(initState:any)={

conststateRef=useRef(nullasany);

const[state,setState]=useState(initState);

useEffect(()={

stateRef.currentstateRef.current(state);

},[state]);

return[

state,

(newState:typeofinitState):PromisetypeofinitState=

newPromise(rel={stateRef.current=rel;setState(newState)})

2.在上面的App.tsx中使用上面的自定义hook

importuseCallbackStatefrom@/customHooks/useCallbackState

const[num,setNum]=useCallbackState(0)

constadd=()={

console.log(更新前，num)

setNum(num+1)

.then((newNum:any)={

console.log(更新后，newNum)

//console.log(num)

此时的运行结果如下：

注意：谨慎使用，打印可以看出，其实状态并没有真正完成更新。依然达不到类组件callback的效果。

其他解决方案

如果真的存在上面这种需求，我们可以使用类组件，或者使用setTimeout来解决上面的问题，把对话框关闭后的业务写在延时的回调中就行了，延时个500毫秒状态一定更新完毕了,个人感觉这个方法不太好，还是推荐使用类组件来解决上述问题。

结尾