useState作为最常见的一个hook,在使用中总是会出现各种坑,最明显的就是 useState 更新异步的问题。
比如:
const [data, setData] = useState(1);
const handleTest = () => {
console.log(data) //1
setName(2)
console.log(name) // 1 打印却还是1
}
原因:
useState 返回的更新对象的方法是异步的,要在下次重绘才能获取新值,不要试图在更改状态之后立即获取状态。
- 解决方案:
1. 使用回调函数更改数据
const [data, setData] = useState(1})
setData((prev) => { return {2})
2. 使用 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 数据内容。