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

更新时间：2022年07月05日 10:18:10 作者：Melody_lw

本文主要介绍了react中useState状态异步更新的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

疑惑

相信刚开始使用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有：useEffect，Promise

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 毫秒状态一定更新完毕了,个人感觉这个方法不太好，还是推荐使用类组件来解决上述问题。

结尾

到此这篇关于解决react中useState状态异步更新的问题的文章就介绍到这了,更多相关react useState状态异步更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Redux中异步action与同步action的使用
本文主要介绍了Redux中异步action与同步action的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
React中常用的Hook有哪些
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-01-01
详解如何构建自己的react hooks
我们组的前端妹子在组内分享时谈到了 react 的钩子，趁此机会我也对我所理解的内容进行下总结，方便更多的同学了解。在 React 的 v16.8.0 版本里添加了 hooks 的这种新的 API，我们非常有必要了解下他的使用方法，并能够结合我们的业务编写几个自定义的 hooks。
2021-05-05
在create-react-app中使用css modules的示例代码
这篇文章主要介绍了在create-react-app中使用css modules的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
React学习之JSX与react事件实例分析
这篇文章主要介绍了React学习之JSX与react事件,结合实例形式分析了React中JSX表达式、属性、嵌套与react事件相关使用技巧,需要的朋友可以参考下
2020-01-01
在react中使用 indexDb的方法
在React中使用IndexedDB进行前端离线存储,可以存储大量数据,支持复杂的数据类型和高性能查询,通过示例展示了如何创建数据库、添加数据、查询数据和构建一个简单的待办事项应用,感兴趣的朋友跟随小编一起看看吧
2024-11-11
详解如何使用React构建跑马灯组件
当你想到跑马灯时,往往会想到游乐园里那些充满活力的灯光和旋转的显示,带回童年的美好回忆,本文将和大家一起探索如何在 React 中构建一个引人入胜的跑马灯组件,需要的朋友可以参考下
2024-04-04
React的生命周期详解
React是用于构建用户界面的JavaScript库。本文详细讲解了React的生命周期，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
React.js前端导出Excel的方式
这篇文章主要为大家介绍了React.js前端导出Excel的方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
react-native使用leanclound消息推送的方法
这篇文章主要介绍了react-native使用leanclound消息推送的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08