react數(shù)組變化不更新如何解決

本文小編為大家詳細介紹“react數(shù)組變化不更新如何解決”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“react數(shù)組變化不更新如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

react數(shù)組變化不更新是因為在js中數(shù)組的賦值是引用傳遞的，其解決辦法：1、打開相應(yīng)的react文件；2、使用擴展運算符，創(chuàng)建一個新數(shù)組，更改內(nèi)存引用；3、使用“panes.push({key: panes.length,tab: `${panes.length + 1}`})”方式重新賦值即可。

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

寫代碼過程中，你會發(fā)現(xiàn)，如果直接使用push等方法改變state，按理來說，push會改變原數(shù)組，數(shù)組應(yīng)該更新，但渲染出來的state并不會更改。

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

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

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

原因：

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

可以使用擴展運算符，創(chuàng)建一個新數(shù)組，更改內(nèi)存引用

需求：

解決辦法：解構(gòu)后重新賦值

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

讀到這里，這篇“react數(shù)組變化不更新如何解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。