React?hooks?useState異步問(wèn)題及解決

更新時(shí)間：2022年08月05日 11:31:46 作者：冬天愛(ài)吃烤肉

這篇文章主要介紹了React?hooks?useState異步問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React Hooks useState異步問(wèn)題

最近在開(kāi)發(fā)中遇到一個(gè)問(wèn)題我接口請(qǐng)求回來(lái)的數(shù)據(jù) 用useState存儲(chǔ)起來(lái)。

但是我后面去改變這個(gè)數(shù)據(jù)的時(shí)候每次拿到都是上次的數(shù)據(jù)沒(méi)辦法及時(shí)更新。

原因

useState 返回的更新?tīng)顟B(tài)方法是異步的，要在下次重繪才能獲取新值。不要試圖在更改狀態(tài)之后立馬獲取狀態(tài)。

解決方法

應(yīng)該使用useRef 存儲(chǔ)這個(gè)數(shù)據(jù),在useEffect里監(jiān)聽(tīng)data的變化

const dataRef = useRef()
const [data,setData] = useState[{}]
useEffect(() => {
?? ? dataRef.current = ? data
}, [data])

當(dāng)我們想使用當(dāng)前的數(shù)據(jù)的時(shí)候直接用dataRef.current 獲取的就是當(dāng)前最新的數(shù)據(jù)

console.log(dataRef.current)//最新的數(shù)據(jù)

React中useState異步更新小坑

問(wèn)題：

在hooks中,修改狀態(tài)的是通過(guò)useState返回的修改函數(shù)實(shí)現(xiàn)的.它的功能類(lèi)似于class組件中的this.setState().而且,這兩種方式都是異步的.可是this.setState()是有回調(diào)函數(shù)的,那useState()呢?

問(wèn)題點(diǎn)

它異步且沒(méi)有回調(diào)函數(shù)

const [count,setCount] = useState(1)
useEffect(()=> {
    setCount(2,()=>{
      console.log('測(cè)試hooks的回調(diào)');
    })
    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().”

是不支持回調(diào)函數(shù)的形式的。因?yàn)閟etCount是異步的，所以打印count是在改變count之前的。

如果我們想要在打印的時(shí)候就拿到最新的值，那么我們可以通過(guò)setCount的第二個(gè)參數(shù)指定依賴項(xiàng)

const [count,setCount] = useState(1)
useEffect(()=> {
    setCount(2)
    console.log(count);
  },[count])

當(dāng)count發(fā)生變化的時(shí)候,useEffect就會(huì)再次相應(yīng),但是這樣就會(huì)有個(gè)問(wèn)題,當(dāng)count從1變?yōu)?的時(shí)候useEffect的回調(diào)函數(shù)會(huì)再次執(zhí)行，就會(huì)分別打印1,2兩次。

  useEffect(()=> {
    let currentValue = null
      setCount((preVal)=>{
        currentValue=preVal
        return 2
      })
      if(currentValue!==count){
        console.log(count);
      }
    },[count])

通過(guò)添加判斷條件，我們可以讓想要執(zhí)行的代碼只執(zhí)行一次

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: