快捷導(dǎo)航

關(guān)于react hook useState連續(xù)更新對(duì)象的問(wèn)題

更新時(shí)間：2024年03月13日 09:03:09 作者：Bearbearssss

這篇文章主要介紹了關(guān)于react hook useState連續(xù)更新對(duì)象的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

react hook useState連續(xù)更新對(duì)象

react hook 的useState更新是異步的，所以在連續(xù)更新出發(fā)useState時(shí)會(huì)出現(xiàn)問(wèn)題

eg：

import React, {useState} from 'react';
 
export default () => {
    const [obj, setObj] = useState({
        a: 1,
        b: 2
      })
 
    const changeObj = () => {
        // 連續(xù)觸發(fā)2次setObj（實(shí)際項(xiàng)目不會(huì)這樣寫(xiě)，我這樣寫(xiě)只是為了模擬連續(xù)觸發(fā)2次setObj帶來(lái)的問(wèn)題）
        setObj({...obj, a: 2})
        setObj({...obj, b: 3}) 
    }
   return (<div onClick={changeObj}>
          // 此時(shí)頁(yè)面上顯示的值為 {a: 1, b: 3}, 出現(xiàn)該問(wèn)題的原因是因?yàn)閡seState是異步的，在第二次觸發(fā)setObj時(shí)，obj還是沒(méi)更新a之前的obj，所以出現(xiàn)該結(jié)果
            {JSON.stringify(obj)}
           </div>)
}

解決此情況的方式

就是在第二次觸發(fā)時(shí)使用

setObj((data) => ({...data, b: 3}))

這樣的方式

import React, {useState} from 'react';
 
export default () => {
    const [obj, setObj] = useState({
        a: 1,
        b: 2
      })
 
    const changeObj = () => {
        // 連續(xù)觸發(fā)2次setObj（實(shí)際項(xiàng)目不會(huì)這樣寫(xiě)，為了模擬情況）
        setObj({...obj, a: 2})
        // data標(biāo)識(shí)存儲(chǔ)的是更新a后的對(duì)象，用這樣的方式可以解決連續(xù)觸發(fā)2次帶來(lái)的問(wèn)題
        setObj((data) => ({...data, b: 3})) 
    }
   return (<div onClick={changeObj}>
          // 此時(shí)頁(yè)面上顯示的值為 {a: 2, b: 3}
            {JSON.stringify(obj)}
           </div>)
}

react hook使用useState()更新?tīng)顟B(tài)(state)異步導(dǎo)致不能及時(shí)讀取更新之后的數(shù)據(jù)

場(chǎng)景描述

我在更新一個(gè)狀態(tài)之后要立馬用這個(gè)狀態(tài)去更新其他狀態(tài)

我的源代碼

const onChange = (nextTargetKeys: any) => {
//更新?tīng)顟B(tài)
    setTargetKeys(nextTargetKeys);
    let v = 0;
    let n = 0;
    let g = 0;
    //立馬使用
   targetKeys.forEach((item: number, index) => {
      v += mockData[item].itemVolume;
      n += mockData[item].itemNw;
      g += mockData[item].itemGw;
    });
       setTopData({ v: Number((v/1000000).toFixed(4)), n: n, g: g });
  };

如果是vue，這里是沒(méi)有問(wèn)題的，但是這是react~這里的數(shù)據(jù)還沒(méi)更新，取到的還是舊數(shù)據(jù)

這里加個(gè)setTimeout延遲執(zhí)行就是新的數(shù)據(jù)。這是為什么了？

原因：

vue是同步更新?tīng)顟B(tài)，異步視圖，當(dāng)狀態(tài)變化是阻塞更新完成之后執(zhí)行后繼邏輯，

react是異步更新?tīng)顟B(tài)，setState 是異步方法，所以不會(huì)阻塞！

處理辦法

添加一個(gè) 副作用（useEffect()）

  useEffect(()=>{
    let v = 0;
    let n = 0;
    let g = 0;
    targetKeys.forEach((item: number, index) => {
      v += mockData[item].itemVolume;
      n += mockData[item].itemNw;
      g += mockData[item].itemGw;
      console.log(v)
    });
    setTopData({ v: Number((v/1000000).toFixed(4)), n: n, g: g });
     },[targetKeys])

順便發(fā)表感受，還是vue的狀態(tài)更新直接、簡(jiǎn)便！