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}
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
近年来，随着移动端对数据可视化的要求越来越高，通过 WebView 在移动端使用 Echarts 这样功能强大的前端数据可视化库，是解决问题的好办法。下面就和小编来一起学习一下吧2019-05-05
React Native中WebView与html双向通信遇到的坑
这篇文章主要介绍了React Native中WebView与html双向通信的一些问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-01-01
react搭建在线编辑html的站点通过引入grapes实现在线拖拉拽编辑html
Grapes插件是一种用于Web开发的开源工具,可以帮助用户快速创建动态和交互式的网页元素,它还支持多语言和多浏览器,适合开发响应式网页和移动应用程序,这篇文章主要介绍了react搭建在线编辑html的站点通过引入grapes实现在线拖拉拽编辑html,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了React中的声明式渲染框架,我们先讨论了命令式和声明式这两种范式的差异，其中命令式更加关注过程，而声明式更加关注结果，对React渲染框架知识感兴趣的朋友跟随小编一起看看吧2022-06-06
React-hook-form-mui基本使用教程(入门篇)
react-hook-form-mui可以帮助开发人员更轻松地构建表单,它结合了React Hook Form和Material-UI组件库,使用react-hook-form-mui,开发人员可以更快速地构建表单,并且可以轻松地进行表单验证和数据处理,本文介绍React-hook-form-mui基本使用,感兴趣的朋友一起看看吧2024-02-02
这篇文章主要介绍了React中如何使用scss问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
react native reanimated实现动画示例详解
这篇文章主要为大家介绍了react native reanimated实现动画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了React函数式组件的性能优化思路详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了react写一个select组件的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本篇文章主要介绍了React 子组件向父组件传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论