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])
}
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
解決react中useState狀態(tài)異步更新的問題
本文主要介紹了react中useState狀態(tài)異步更新的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
本文文章介紹了React中的Ref概念,包括其基礎概念、使用方式,并討論了在React中通過Ref操作DOM值時避免組件不更新的問題,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-11-11
這篇文章主要介紹了react實現(xiàn)移動端下拉菜單的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
前端應用大多數(shù)是SPA（單頁應用程序），也就是只有一個HTML頁面的應用程序。因為它的用戶體驗更好、對服務器壓力更小，所以更受歡迎。為了有效的使用單個頁面來管理多頁面的功能，前端路由應運而生2022-09-09
這篇文章主要介紹了TypeScript在React項目中的使用總結,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
React中key用于唯一標識元素,提升列表渲染性能并確保狀態(tài)一致性,key幫助React高效比較新舊節(jié)點,本文主要介紹了React 中 key 的作用,感興趣的可以了解一下2025-09-09
React動態(tài)更改html標簽的實現(xiàn)方式
這篇文章主要介紹了React動態(tài)更改html標簽的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了React組件之多選Checkbox實例,具有很好的參考價值,希望對大家有所幫助,2023-10-10
這篇文章主要為大家介紹了Remix路由模塊輸出對象loader函數(shù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-04-04
這篇文章主要為大家詳細介紹了如何基于React封裝一個層次模糊效果的容器組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03