React hooks useState异步问题

最新推荐文章于 2024-07-08 10:54:40 发布

冬天爱吃烤肉

最新推荐文章于 2024-07-08 10:54:40 发布

阅读量1.5w

点赞数 8

分类专栏： React 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/bob_yan623/article/details/120942456

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了在React Hooks中遇到的useState异步更新问题，解释了由于状态更新的异步性质导致无法立即获取最新数据的原因。提出了解决方案，即使用useRef结合useEffect来跟踪数据变化，确保能获取到当前最新的数据。通过示例代码展示了如何实现这一策略，以确保在组件中正确地访问和更新状态。

摘要由CSDN通过智能技术生成

React Hooks useState异步问题

最近在开发中遇到一个问题我接口请求回来的数据用useState存储起来。

但是我后面去改变这个数据的时候每次拿到都是上次的数据没办法及时更新。

原因：
- useState 返回的更新状态方法是异步的，要在下次重绘才能获取新值。不要试图在更改状态之后立马获取状态。
解决方法:
- 应该使用useRef 存储这个数据,在useEffect里监听data的变化

const dataRef = useRef()
const [data,setData] = useState[{}]
useEffect(() => {
	 dataRef.current =   data
}, [data])

当我们想使用当前的数据的时候直接用dataRef.current 获取的就是当前最新的数据

console.log(dataRef.current)//最新的数据

冬天爱吃烤肉

关注

8
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
React hooks useState异步问题

React Hooks useState异步问题最近在开发中遇到一个问题我接口请求回来的数据用useState存储起来。但是我后面去改变这个数据的时候每次拿到都是上次的数据没办法及时更新。解决方法:使用useRef 存储这个数据,在useEffect里监听data的变化const dataRef = useRef()const [data,setData] = useState[{}]useEffect(() => { dataRef.current = data},
复制链接

扫一扫