快捷導(dǎo)航

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)文章

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