在執行道具的深度更新時反應不更新組件

我有一個組件，其中有一個prop，它是一個數組，用於映射併爲該數組中的每個項目返回一個子組件。這些項目中的每一個都是另一個對象數組。然而，當我的內部數組中執行更新的項目是這樣的：在執行道具的深度更新時反應不更新組件

let newInnerArray = getInnerArray(itemIndex); //assume this is a function that gets the correct inner array by the index 

    newInnerArray[innerArrayIndex].name = "changed name"; 

    arrayObjs[itemIndex].innerArray = newInnerArray;

的反應，因爲我已經進行了更新，以內部陣列並沒有改變他們的數目組件不更新（這會觸發更新）。這裏是一個什麼樣的道具看起來像澄清的簡化版本：

[{ 
     name: "name 1", 
     innerArray: [ 
      { 
       innerName: "inner name 1" 
      } 
     ] 
    }]

在我的組件

所以，我正在映射在道具外陣中還有。當我更新道具項目的「innerName」之一時，不會爲該組件激發更新。

觸發更新，我加入一個虛擬屬性，每個外陣列的項目和每一個我做一個更新到內部陣列像這次更新它：

arrayObjs[itemIndex].date = performance.now(); //using performance.now() because it always produces a unique value

現在製作道具看起來像這樣：

[{ 
    name: "name 1", 
    date: performance.now(), 
    innerArray: [ 
     { 
      "innerName": "inner name 1" 
     } 
    ] 
}]

這工作，但很hacky。每次更新其中一個道具的內部數組時，是否有更好的方法來強制更新組件？ PS：對不起，如果我沒有解釋得很好，或者它很混亂。如果有人不明白，我會進一步解釋。

來源

2017-08-28 Ryan

好像是因爲React在你的情況下做的比較淺。比較對象時，淺比較只比較它們的引用（「它們指向同一個對象嗎？」）。這裏有幾種選擇我可以想到：

使用immutableJS爲您的狀態。我在我的應用程序中這樣做。
創建內部數組副本（複印件）

const innerArray = getInnerArray(itemIndex); 
 
    let newInner = [...innerArray];

使用手動shouldComponentUpdate與lodashisEqual（或underscore isEqual）比較新的props。

來源

2017-08-28 08:35:27

有兩件事：innerArray已被克隆，我嘗試使用第三種方法，但它仍然無法工作。我寧願用shouldComponentUpdate解決這個問題，因爲這不是因爲它是最不引人注目的解決方案 – Ryan

在執行道具的深度更新時反應不更新組件

回答

相關問題