React hooks中useState踩坑之异步的问题
更新时间：2024年03月13日 15:19:04 作者：小刘加油！
这篇文章主要介绍了React hooks中useState踩坑之异步的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
useState作为最常见的一个hook，在使用中总是会出现各种坑，最明显的就是 useState 更新异步的问题。
比如我们把接口返回的数据，使用 useState 储存起来，但是当后面去改变这个数据的时候，每次拿到的都是上次的数据，无法实时更新。
或者我们在函数内部使用 setState ，然后立即打印 state，打印的结果还是第一次的state 的值。
比如下面的代码实例。
const [data, setData] = useState('111');
const handleTest = () => {
console.log(data) // 111
setName('222')
console.log(name) // 111
}
原因
useState 返回的更新对象的方法是异步的，要在下次重绘才能获取新值，不要试图在更改状态之后立即获取状态。
useState 使用的两种方式
我们知道，useState中的 [ ] 是一个解构运算，第一个是设置的值，第二个是用来改变 state 的方法。
直接传入新值
const [data, setData] = useState(1) setData(data + 1)
传入回调函数 setState(callback)
const [data, setData] = useState(0) setData((prev) => prev + 1); // prev 是data 改变之前的值，return 返回的值会作为新状态覆盖data
一般情况下，我们使用第一种方式即可，但在某些特殊情况下，第一种方式获取到的值不是最新设置的。
解决方案
使用 useRef
思路：
先使用 useRef 进行存储数据
再使用 useEffect 监听数据变化，并进行更新。
import React, { useState, useEffect, useRef } from 'react';
const Index = () => {
const [info, setInfo] = useState()
const infoRef = useRef()
useEffect(() => {
infoRef.current = info
}, [info])
}
在之后需要使用 info 数据的地方只需要获取 infoRef.current 即可获取最新的 info 数据内容。
使用回调函数更改数据
const [data, setData] = useState({a: 1})
setData((prev) => {
return {a: prev.a + 1}
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了React/Redux应用使用Async/Await的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
React使用useImperativeHandle自定义暴露给父组件的示例详解
useImperativeHandle 是 React 提供的一个自定义 Hook,用于在函数组件中显式地暴露给父组件特定实例的方法,本文将介绍 useImperativeHandle的基本用法、常见应用场景,需要的可以参考下2024-03-03
在React应用开发中,数据持久化是一个至关重要的需求,当用户刷新页面、关闭浏览器后重新打开应用,或者在不同设备间切换时,我们希望能够保持用户的数据状态,本文将全面介绍React项目中实现数据持久化的各种方法,需要的朋友可以参考下2025-09-09
这篇文章主要介绍了react中使用ant组件库的modal弹窗报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
React中的setState使用细节和原理解析(最新推荐)
这篇文章主要介绍了React中的setState使用细节和原理解析(最新推荐),前面我们有使用过setState的基本使用, 接下来我们对setState使用进行详细的介绍，需要的朋友可以参考下2022-12-12
在传统的 React 项目里,页面的渲染工作是在浏览器里完成的,而服务器端渲染（SSR）则是让服务器先把 React 组件渲染成 HTML 字符串,再把这个 HTML 字符串发送给浏览器,下面我们就来看看具体实现方法吧2025-03-03
本文介绍了如何使用React构建一个基础的视频播放器组件,并探讨了常见问题和易错点,通过组件化思想和合理管理状态,可以实现功能丰富且性能优化的视频播放器2025-01-01
这篇文章主要介绍了React hook实现简单的websocket封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
React的调和算法，主要发生在render阶段，调和算法并不是一个特定的算法函数，而是指在调和过程中，为提高构建workInProcess树的性能，以及Dom树更新的性能，而采用的一种策略，又称diffing算法2021-12-12
这篇文章主要为大家详细介绍了react native实现监控手势上下拉动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
最新评论