React hooks中 useState踩坑-=--异步问题

墨蓝 2024-04-01 15:02 203阅读 0赞

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