react中hooks使用useState的更新不觸發(fā)dom更新問題及解決
更新時(shí)間：2024年01月03日 09:20:55 作者：夜空孤狼嘯
這篇文章主要介紹了react中hooks使用useState的更新不觸發(fā)dom更新問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
問題
const [tableData, setTableData] = useState([{ key: '1' }])
const newAddField = () => {
tableData.push({
key: `${fieldNum + 1}`
})
setFieldNum(fieldNum + 1)
// 這種方法并不會(huì)更新dom節(jié)點(diǎn)
setTableData(tableData)
}
這種方法，雖然更新的useState，但是dom節(jié)點(diǎn)并不會(huì)更新
原因
在 Hook 中直接修改 state 的一個(gè)對(duì)象（或數(shù)組）屬性的某個(gè)子屬性或值，然后直接進(jìn)行 set，不會(huì)觸發(fā)重新渲染。
對(duì) Class Component來說，state 是 Immutable 的，setState 后一定會(huì)生成一個(gè)全新的 state 引用。
它是通過 this.state 方式讀取 state，所以每次代碼執(zhí)行都會(huì)拿到最新的 state 引用。
對(duì) Hook Function Component 而言，useState 產(chǎn)生的數(shù)據(jù)也是 Immutable 的，通過數(shù)組第二個(gè)參數(shù) Set 一個(gè)新值后，原來的值會(huì)形成一個(gè)新的引用在下次渲染時(shí)。
解決方法
通過擴(kuò)展運(yùn)算符改變引用地址
const [tableData, setTableData] = useState([{ key: '1' }])
const newAddField = () => {
tableData.push({
key: `${fieldNum + 1}`
})
setFieldNum(fieldNum + 1)
// 這種方法并不會(huì)更新dom節(jié)點(diǎn)
// setTableData(tableData)
// 通過擴(kuò)展運(yùn)算符實(shí)現(xiàn)深拷貝
setTableData([...tableData])
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Stack?Navigator中使用自定義的Render?Callback
這篇文章主要為大家介紹了Stack?Navigator中使用自定義的Render?Callback使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
本篇文章主要介紹了探究react-native 源碼的圖片緩存問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了redux副作用處理之redux-thunk使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了react-native只保留3x圖原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Hook是一種函數(shù)，它可以讓你在函數(shù)組件中“掛鉤”到React狀態(tài)和生命周期等特性，這篇文章主要和大家介紹了React中Hook的作用和用處，希望對(duì)大家有所幫助2023-05-05
使用React+SpringBoot開發(fā)一個(gè)協(xié)同編輯的表格文檔實(shí)現(xiàn)步驟
隨著云計(jì)算和團(tuán)隊(duì)協(xié)作的興起,協(xié)同編輯成為了許多企業(yè)和組織中必不可少的需求,本文小編就將為大家介紹如何使用React+SpringBoot簡單的開發(fā)一個(gè)協(xié)同編輯的表格文檔,感興趣的朋友一起看看吧2023-11-11
react路由守衛(wèi)的實(shí)現(xiàn)(路由攔截)
react不同于vue，通過在路由里設(shè)置meta元字符實(shí)現(xiàn)路由攔截。本文就詳細(xì)的介紹一下，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了解決React Native端口號(hào)修改的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
react-redux集中式狀態(tài)管理及基本使用與優(yōu)化
react-redux把組件分為兩類，一類叫做UI組件，一類叫做容器組件，這篇文章主要介紹了集中式狀態(tài)管理＜react-redux＞基本使用與優(yōu)化,需要的朋友可以參考下2022-08-08