解決react中useState狀態(tài)異步更新的問題

更新時間：2022年07月05日 10:18:10 作者：Melody_lw

本文主要介紹了react中useState狀態(tài)異步更新的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

疑惑

相信剛開始使用react函數(shù)組件的小伙伴也遇到過一個坑，就是 useState 更新狀態(tài)是異步更新的，但是react 并沒有提供關(guān)于這個問題的解決方案。那我們能否使用自己的方法來解決這個問題呢？答案肯定是可以的。

狀態(tài)異步更新帶來的問題

就拿一個比較常見的場景來說。在react項目中，我們想在關(guān)閉對話框后再去處理其他業(yè)務(wù)。但是 useState 的狀態(tài)是異步更新的。我們通過setVisible 更新狀態(tài)后，狀態(tài)并沒有立馬更新，這也就說明對話框并沒有關(guān)閉，這也就造成了我們后面的邏輯在對話框沒關(guān)閉時就執(zhí)行了，這并不是我們想要的結(jié)果。下面來看我是如何來巧妙的解決這個問題的。

問題示例

// App.tsx
import {useState} from "react"

export default ()=>{

const [num,setNum]=useState(0)

const add=()=>{
  console.log("更新前",num)
  setNum(num+1)
  console.log('更新后',num)
}

return(
<div className='App'>
 <p>{num}</p>
 <button onClick={add}>num++</button>
</div>
)
}

下面是上面組件運行結(jié)果：

點擊按鈕后的運行結(jié)果：

當(dāng)我們點擊按鈕時的打印結(jié)果：

問題解決

類組件的解決方案

在類組件中，我們可以在 setState(newstate,callback) 第二個參數(shù)傳一個回調(diào)來處理本次狀態(tài)更新后的一些其他業(yè)務(wù)。但是在函數(shù)組件中我們?nèi)绾蝸斫鉀Q這個問題呢？來看以下方案，也是我們這篇文章主要想為大家解決的問題。

函數(shù)組件的解決方案

解決該問題使用到的 api有：useEffect，Promise

1.在項目源碼目錄下創(chuàng)建文件夾 customHooks，然后在 customHooks/useCallbackState.ts中編寫如下代碼：

import { useState, useRef, useEffect } from 'react';

export default(initState: any)=>{
    const stateRef = useRef(null as any);
    const [state, setState] = useState(initState);

    useEffect(() => {
    stateRef.current && stateRef.current(state);
    }, [state]);

    return [
        state,
        (newState:typeof initState):Promise<typeof initState>=>
        new Promise(rel=>{stateRef.current=rel;setState(newState)}) 
    ];
}

2.在上面的 App.tsx中使用上面的自定義hook

import useCallbackState from "@/customHooks/useCallbackState"
const [num,setNum]=useCallbackState(0)

const add=()=>{
   console.log('更新前'，num)
   setNum(num+1)
   .then((newNum:any)=>{
   console.log('更新后'，newNum)
   // console.log(num)
  })
}

此時的運行結(jié)果如下：