react數組變化不更新怎么辦-世界快看

本教程操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react數組變化不更新怎么辦？

react中 一個state數組某元素屬性發生變化時，setState頁面不更新

(資料圖)

寫代碼過程中，你會發現，如果直接使用push等方法改變state，按理來說，push會改變原數組，數組應該更新，但渲染出來的state并不會更改。

今天遇到的問題是：組件內對數組元素進行修改后數據有變化但是頁面沒重新渲染

話說這是因為組件沒能夠識別數組的變化，所以頁面沒有重新渲染

所以只要讓組件感知到你發生了改變，就可以達到刷新的效果

原因：

這是由于js中，數組的賦值是引用傳遞的，array.push相當于直接更改了數組對應的內存塊，但react內部用于對比的array的內存并沒有更改，是指向同一個內存的，setState只做shallow compare，因此沒有觸發re-render。

可以使用擴展運算符，創建一個新數組，更改內存引用

需求：

解決辦法：解構后重新賦值

const onClick = (key) => {// tab點擊函數    if (key === "addTab") {      panes.push({        key: panes.length,        tab: `篩選記錄${panes.length + 1}`      })      setPanes([...panes])    }  }

推薦學習：《react視頻教程》

以上就是react數組變化不更新怎么辦的詳細內容，更多請關注php中文網其它相關文章！

關鍵詞： React