react中hooks使用useState的更新不觸發(fā)dom更新問題及解決
更新時間：2024年01月03日 09:20:55 作者：夜空孤狼嘯
這篇文章主要介紹了react中hooks使用useState的更新不觸發(fā)dom更新問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題
const [tableData, setTableData] = useState([{ key: '1' }])
const newAddField = () => {
tableData.push({
key: `${fieldNum + 1}`
})
setFieldNum(fieldNum + 1)
// 這種方法并不會更新dom節(jié)點
setTableData(tableData)
}
這種方法，雖然更新的useState，但是dom節(jié)點并不會更新
原因
在 Hook 中直接修改 state 的一個對象（或數(shù)組）屬性的某個子屬性或值，然后直接進行 set，不會觸發(fā)重新渲染。
對 Class Component來說，state 是 Immutable 的，setState 后一定會生成一個全新的 state 引用。
它是通過 this.state 方式讀取 state，所以每次代碼執(zhí)行都會拿到最新的 state 引用。
對 Hook Function Component 而言，useState 產(chǎn)生的數(shù)據(jù)也是 Immutable 的，通過數(shù)組第二個參數(shù) Set 一個新值后，原來的值會形成一個新的引用在下次渲染時。
解決方法
通過擴展運算符改變引用地址
const [tableData, setTableData] = useState([{ key: '1' }])
const newAddField = () => {
tableData.push({
key: `${fieldNum + 1}`
})
setFieldNum(fieldNum + 1)
// 這種方法并不會更新dom節(jié)點
// setTableData(tableData)
// 通過擴展運算符實現(xiàn)深拷貝
setTableData([...tableData])
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React Native中NavigatorIOS組件的簡單使用詳解
這篇文章主要介紹了React Native中NavigatorIOS組件的簡單使用詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
React中useMemo、useCallback的具體使用
useMemo和useCallback是React中用于緩存計算結(jié)果和函數(shù)的Hooks,本文就來介紹一下useMemo、useCallback的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-01-01
這篇文章主要介紹了React+Koa實現(xiàn)文件上傳的示例，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
函數(shù)式組件的基本意義就是,組件實際上是一個函數(shù),不是類,下面這篇文章主要給大家介紹了關(guān)于React中函數(shù)組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
本文主要介紹了react腳手架配置代理的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Context提供了一個無需為每層組件手動添加props，就能在組件樹間進行數(shù)據(jù)傳遞的方法。在一個典型的?React?應(yīng)用中，數(shù)據(jù)是通過props屬性自上而下（由父及子）進行傳遞的，但這種做法對于某些類型的屬性而言是極其繁瑣的2022-12-12
這篇文章主要為大家介紹了React?之?Suspense提出的背景及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
本文主要介紹了React文字展開收起組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了react?事項懶加載的三種方法及使用場景，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
React利用路由實現(xiàn)登錄界面的跳轉(zhuǎn)
這篇文章主要介紹了React利用路由實現(xiàn)登錄界面的跳轉(zhuǎn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04