react數組變化不更新怎麼辦

react數組變化不更新是因為在js中數組的賦值是引用傳遞的，其解決方法：1、打開對應的react檔；2、使用擴展運算符，創建一個新數組，更改內存引用；3、使用「panes.push({key: panes.length,tab: `${panes.length 1}`})」方式重新賦值即可。

本教學操作環境：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中文網其他相關文章！