react class组件 function组件区别（React hooks中 useState踩坑-=–异步问题）

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