快捷導(dǎo)航

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

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

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

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

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

eg：

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

解決此情況的方式

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

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（實際項目不會這樣寫，為了模擬情況）
        setObj({...obj, a: 2})
        // data標(biāo)識存儲的是更新a后的對象，用這樣的方式可以解決連續(xù)觸發(fā)2次帶來的問題
        setObj((data) => ({...data, b: 3})) 
    }
   return (<div onClick={changeObj}>
          // 此時頁面上顯示的值為 {a: 2, b: 3}
            {JSON.stringify(obj)}
           </div>)
}

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

場景描述

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

我的源代碼

const onChange = (nextTargetKeys: any) => {
//更新狀態(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，這里是沒有問題的，但是這是react~這里的數(shù)據(jù)還沒更新，取到的還是舊數(shù)據(jù)

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

原因：

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

react是異步更新狀態(tài)，setState 是異步方法，所以不會阻塞！

處理辦法

添加一個副作用（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)更新直接、簡便！