位置: IT常识 - 正文
推荐整理分享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 返回的更新对象的方法是异步的,要在下次重绘才能获取新值,不要试图在更改状态之后立即获取状态。
1. useState 使用的两种方式我们知道,useState中的 [ ] 是一个解构运算,第一个是设置的值,第二个是用来改变 state 的方法。
1. 直接传入新值const [data, setData] = useState(1)setData(data + 1)2. 传入回调函数 setState(callback)const [data, setData] = useState(0)setData((prev) => prev + 1); // prev 是data 改变之前的值,return 返回的值会作为新状态覆盖data一般情况下,我们使用第一种方式即可,但在某些特殊情况下,第一种方式获取到的值不是最新设置的。
2. 解决方案2.1 使用 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 数据内容。
2.2 使用回调函数更改数据const [data, setData] = useState({a: 1})setData((prev) => {return {a: prev.a + 1}})上一篇:瓦尔加迪纳的日落,意大利南蒂罗尔多洛米蒂山脉 (© Marco Capellari/Getty Images)(瓦尔加德)
下一篇:idea的vue文件中使用ElementUi组件(idea打开vue文件)
友情链接: 武汉网站建设