快捷導(dǎo)航

ReactHook使用useState更新變量后,如何拿到變量更新后的值

更新時(shí)間：2024年03月13日 09:41:38 作者：wen_文文

這篇文章主要介紹了ReactHook使用useState更新變量后,如何拿到變量更新后的值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

ReactHook使用useState更新變量后,如何拿到變量更新后的值

場(chǎng)景

const [count, setCount] = useState(0)；

在setCount() 更新變量的值后，立即調(diào)用某個(gè)函數(shù)query，在函數(shù)中需要讀取到這個(gè)變量的新值；但是此時(shí)直接調(diào)用的話拿到的是舊值；

為什么變量更新后不能立即拿到新值？

因?yàn)閟etCount 函數(shù)用于更新 count值。

它接收一個(gè)新的 count 值并將組件的一次重新渲染加入隊(duì)列中，在組件的重新渲染中，

useState()返回的第一個(gè)值始終是count更新后的新值，所以如果組件還未重新渲染就直接讀取count變量的話，

拿到的就是未更新的舊值；

const UseState = () => {
  // 函數(shù)組件中沒(méi)有this
  const [count, setCount] = useState(0)
 
  const add = () => {
    let newCount = count
    console.log('value1', count);  // 0
    setCount( newCount+= 1)
    console.log('value2', count);  // 0
    query() 
  }
 
  const query = () => {
    console.log('query函數(shù)中：', count);  // 0
  }
  return (
    <div>
      <p>{count}</p>
      <button onClick={add} >增加</button>
    </div>
  )
}

打印結(jié)果：

解決方法

1）可以將count的新值通過(guò)函數(shù)傳參的方式傳入query函數(shù)；

// 改寫(xiě)add和query函數(shù)；
 
const add = () => {
    let newCount = count
    console.log('value1', count);
    setCount( newCount+= 1)
    console.log('value2', count);
    query(newCount)   
 }
 const query = (count) => {
    console.log('query函數(shù)中：', count);
 }

打印結(jié)果：

2）在useEffect中調(diào)用query函數(shù)，因?yàn)樵趗seEffect中，組件dom已經(jīng)更新完畢，可以拿到count的最新值；

（缺點(diǎn)：每次count值改變，都會(huì)觸發(fā)useEffect，從而執(zhí)行query函數(shù)；）

  // 組件每次渲染之后執(zhí)行的操作，執(zhí)行該操作時(shí)dom都已經(jīng)更新完畢
  useEffect(()=>{
    // 1、可在此處拿到count更新后的值
    console.log('value3', count);
    query()
  }, [count])
 
  const add = () => {
    let newCount = count
    console.log('value1', count);
    setCount( newCount+= 1)
    console.log('value2', count);
  }
 const query = () => { 
   console.log('query函數(shù)中：', count);
 }

打印結(jié)果：

3）通過(guò)useRef()定義一個(gè)可變的ref變量，通過(guò)current屬性保存count可變值，從而在count更新后，通過(guò)ref的current屬性拿到更新后的count值；

注意：調(diào)用query函數(shù)時(shí)需要加上setTimeout()進(jìn)行調(diào)用；

// 定義一個(gè)可變的countRef對(duì)象，該對(duì)象的current屬性被初始化為傳入的參數(shù)count;
const countRef = useRef(count)
 
// 在countRef.current屬性中保存一個(gè)可變值count的盒子；
countRef.current = count
 
const add = () => {
   let newCount = count
   console.log('value1', count);
   setCount( newCount+= 1)
   console.log('value2', count);
   setTimeout(() => query(), 0);
}
 
const query = () => {
   console.log('query函數(shù)中：', countRef.current);
}

打印結(jié)果：