本文深入解析React Hooks中useState异步更新导致获取旧值的问题。通过对比class组件的setState，指出useState不支持回调函数的限制。文章提供了使用useRef结合useEffect监听数据变化的最佳实践，并探讨了利用依赖项和条件判断优化副作用执行的方法，帮助开发者避免状态同步陷阱。
React Hooks useState异步问题
最近在开发过程中，我遇到一个具体场景：通过接口请求获取数据后，尝试使用useState将其存储起来。
然而，在后续逻辑中试图修改该数据时，发现每次读取到的都是上一次的状态值，无法及时获取最新更新的值。
原因
useState返回的状态更新函数是异步执行的，新状态只有在下次组件重绘时才会生效。因此，不应在调用状态更新函数后立即尝试读取新的状态值。
解决方法
推荐的做法是使用useRef来存储该数据，并在useEffect中监听data的变化以同步ref的值。
const dataRef = useRef()
const [data,setData] = useState[{}]
useEffect(() => {
dataRef.current = data
}, [data])当需要获取当前最新数据时，直接通过dataRef.current即可获取到最新的值。
console.log(dataRef.current)//最新的数据React中useState异步更新小坑
问题：
在Hooks中，状态修改是通过useState返回的更新函数实现的。其功能类似于Class组件中的this.setState()。值得注意的是，这两种方式在行为上都是异步的。然而，this.setState()支持传入回调函数，而useState()是否支持呢？
问题点
其核心问题在于它是异步的，且不支持回调函数。
const [count,setCount] = useState(1)
useEffect(()=> {
setCount(2,()=>{
console.log('测试hooks的回调');
})
console.log(count);
},[])
可以看到提示 “State updates from the useState() and useReducer() Hooks don’t support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().”
这表明它不支持回调函数的形式。由于setCount是异步执行的，因此console.log(count)打印出的仍然是改变前的旧值。
如果我们希望在状态变更后立即获取最新值，可以通过为setCount指定第二个参数（依赖项）来触发useEffect。
const [count,setCount] = useState(1)
useEffect(()=> {
setCount(2)
console.log(count);
},[count])
当count发生变化时，useEffect会再次响应执行。但这带来一个问题：例如count从1变为2的过程中，useEffect的回调函数会多次执行，导致分别打印1和2两次。
useEffect(()=> {
let currentValue = null
setCount((preVal)=>{
currentValue=preVal
return 2
})
if(currentValue!==count){
console.log(count);
}
},[count])
通过添加判断条件，我们可以限制逻辑，使得想要执行的代码只执行一次。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。