在react / redux中，在商店prop上調用map（）可在商店本身中編輯prop

Question

我有一個連接到Redux存儲的組件，該組件接收一個prop並將其傳遞給子組件。

在子組件中，我以這種方式在render()方法中詳細說明了這個道具

let dataForFlatList = [].concat.apply([], [].concat.apply([], this.props.internalData.map( a => {
   if(a.hasOwnProperty("components")){ 
      a.components[a.components.length-1].lastItem = true
   } else {
      a.dayData.lastItem = true
   } 
   return Object.values(a)
})));

為了清楚起見，Redux商店中的該道具具有以下結構：

[
   {
      dailyData: {
         date: .....
         steps: .....
      },
      components: [ {...}, {...}, {...}, {...}, {...} ...]
   },
   {
      dailyData: {
         date: .....
         steps: .....
      },
      components: [ {...}, {...}, {...}, {...}, {...} ...]
   },
   {
      dailyData: {
         date: .....
         steps: .....
      }
   }
   :::
]

因此，我想做的是將一個屬性lastItem添加到components數組中的最后一個對象； 或者，如果不存在components ， lastItem添加到對象dailyData 。 最后，只有一系列concat()才能獲得沒有嵌套對象的單個數組。

該代碼有效，但是這里的一個奇怪的事實是，當我在this.props.internalData上調用map()函數時，商店internalData的prop internalData也被編輯了。

您能幫助您理解為什么會發生嗎？

謝謝

Answer 1

Javascript通過引用傳遞對象。 這意味着，如果克隆對象（所謂的“淺克隆”），則實際上會更改主對象引用，但嵌套屬性保持不變。 當您map對象數組或調用Object.assign({}, /.../)時，就會發生這種情況。

因此，當您像a.dayData.lastItem = true那樣更改a.dayData.lastItem = true ，實際上是在更改原始屬性。 Map將返回克隆的對象，但是此特定分配更改了原始屬性的引用值。

為了解決它，您有多種方法：

1. 克隆整個對象和每個屬性（深層克隆）
2. 不要更改屬性，而只是傳遞一個新值（在每次map迭代中構造一個新對象）；

另外，擺脫這些多個[].concat.apply ，可能不需要它們：)

解決方案：

1.您可以嘗試使用_.cloneDeep ： https : _.cloneDeep ：

// Inside your map
const clonedA = _.cloneDeep(a);

if(clonedA.hasOwnProperty("components")){ 
   clonedA.components[clonedA.components.length-1].lastItem = true
} else {
   clonedA.dayData.lastItem = true
} 

return clonedA;

但是要警告！ 對於大型物體，它可能非常慢（它必須遍歷所有結構）。

2.您可以嘗試像這樣傳遞新值：

if(a.hasOwnProperty("components")){ 
   // We use empty slice to clone the array
   const clonedComponents = components.slice();
   const lastArrayElement = clonedComponents[clonedComponents.length-1];
   clonedComponents[clonedComponents.length - 1] = Object.assign({}, lastArrayElement, { lastItem: true });

   return Object.assign({}, a, { components: clonedComponents});
} else {
   // Note empty object as the first param - we also return completely new value
   return Object.assign({}, a, { dayData: { lastItem: true } });
} 
return Object.values(a);

映射對象時，如果我知道對象的狀態，我仍然更喜歡使用_.cloneDeep或_.merge （不要忘記使用{}作為第一個參數調用Object.assign ！）。對性能有重大影響。

對於您的情況，我建議遵循我的第二條建議-只需在數據結構的每個級別上創建新對象。 我還建議將這些操作轉移給助手，因為您會看到代碼變得相當復雜且有些丑陋。