亲宝软件园·资讯

展开

react useState状态异步更新

Melody_lw 人气:0

疑惑

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

状态异步更新带来的问题

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

问题示例

// App.tsx
import {useState} from "react"

export default ()=>{

const [num,setNum]=useState(0)

const add=()=>{
  console.log("更新前",num)
  setNum(num+1)
  console.log('更新后',num)
}

return(
<div className='App'>
 <p>{num}</p>
 <button onClick={add}>num++</button>
</div>
)
}

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

点击按钮后的运行结果:

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

问题解决

类组件的解决方案

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

函数组件的解决方案

解决该问题使用到的 api有:useEffectPromise

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

import { useState, useRef, useEffect } from 'react';

export default(initState: any)=>{
    const stateRef = useRef(null as any);
    const [state, setState] = useState(initState);

    useEffect(() => {
    stateRef.current && stateRef.current(state);
    }, [state]);

    return [
        state,
        (newState:typeof initState):Promise<typeof initState>=>
        new Promise(rel=>{stateRef.current=rel;setState(newState)}) 
    ];
}

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

import useCallbackState from "@/customHooks/useCallbackState"
const [num,setNum]=useCallbackState(0)

const add=()=>{
   console.log('更新前',num)
   setNum(num+1)
   .then((newNum:any)=>{
   console.log('更新后',newNum)
   // console.log(num)
  })
}

此时的运行结果如下:

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

其他解决方案

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

结尾

加载全部内容

相关教程
猜你喜欢
用户评论