React hooks中 useState踩坑-=--异步问题 亲测有效

useState作为最常见的一个hook，在使用中总是会出现各种坑，最明显的就是 useState 更新异步的问题。

比如：

 const [data, setData] = useState(1);

 const handleTest = () => {

    console.log(data) //1

    setName(2)

    console.log(name) // 1  打印却还是1

  }

原因：

useState 返回的更新对象的方法是异步的，要在下次重绘才能获取新值，不要试图在更改状态之后立即获取状态。

1. 解决方案：

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 数据内容。