React Hooks useState异步更新问题及解决方案

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])

通过添加判断条件，我们可以限制逻辑，使得想要执行的代码只执行一次。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。