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

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

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

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

場景

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

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

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

因為setCount 函數(shù)用于更新 count值。

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

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

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

const UseState = () => {
  // 函數(shù)組件中沒有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>
  )
}

打印結果：

解決方法

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

// 改寫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);
 }

打印結果：

2）在useEffect中調用query函數(shù)，因為在useEffect中，組件dom已經更新完畢，可以拿到count的最新值；

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

  // 組件每次渲染之后執(zhí)行的操作，執(zhí)行該操作時dom都已經更新完畢
  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);
 }

打印結果：

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

注意：調用query函數(shù)時需要加上setTimeout()進行調用；

// 定義一個可變的countRef對象，該對象的current屬性被初始化為傳入的參數(shù)count;
const countRef = useRef(count)
 
// 在countRef.current屬性中保存一個可變值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);
}

打印結果：

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

React實現(xiàn)控制減少useContext導致非必要的渲染詳解
這篇文章主要介紹了React如何有效減少使用useContext導致的不必要渲染,使用useContext在改變一個數(shù)據(jù)時，是通過自己逐級查找對比改變的數(shù)據(jù)然后渲染，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-11-11
React子組件調用父組件的方法
本文主要介紹了React子組件調用父組件的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-08-08
React?Streaming?SSR原理示例深入解析
這篇文章主要為大家介紹了React?Streaming?SSR原理示例深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
React?hook實現(xiàn)簡單的websocket封裝方式
這篇文章主要介紹了React?hook實現(xiàn)簡單的websocket封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
詳解React Angular Vue三大前端技術
當前世界中，技術發(fā)展非常迅速并且變化迅速，開發(fā)者需要更多的開發(fā)工具來解決不同的問題。本文就對于當下主流的前端開發(fā)技術React、Vue、Angular這三個框架做個相對詳盡的探究，目的是為了解開這些前端技術的面紗，看看各自的廬山真面目。
2021-05-05
antd?upload上傳如何獲取文件寬高
這篇文章主要介紹了antd?upload上傳如何獲取文件寬高問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
React項目中decorators裝飾器報錯問題解決方案
這篇文章主要介紹了React項目中decorators裝飾器報錯，本文給大家分享問題所在原因及解決方案，通過圖文實例相結合給大家介紹的非常詳細,需要的朋友可以參考下
2023-01-01
D3.js(v3)+react 實現(xiàn)帶坐標與比例尺的散點圖 (V3版本)
散點圖(Scatter Chart),通常是一橫一豎兩個坐標軸，數(shù)據(jù)是一組二維坐標，分別對應兩個坐標軸，與坐標軸對應的地方打上點。由此可以猜到，需要的元素包括circle(圓)和axis(坐標軸),接下來通過本文大家分享D3.js(v3)+react 實現(xiàn)帶坐標與比例尺的散點圖 (V3版本) ，一起看看
2019-05-05
詳解Stack?Navigator中使用自定義的Render?Callback
這篇文章主要為大家介紹了Stack?Navigator中使用自定義的Render?Callback使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
react 實現(xiàn)圖片正在加載中加載完成加載失敗三個階段的原理解析
這篇文章主要介紹了react 實現(xiàn)圖片正在加載中加載完成加載失敗三個階段的,通過使用loading的圖片來占位，具體原理解析及實現(xiàn)代碼跟隨小編一起通過本文學習吧
2021-05-05