有沒有辦法在不改變位置的情況下更改對象數組中的項目？

Question

我正在修改一個對象數組。 我想改變一個項目的值。 為此，我創建了一個新對象，舊對象更改了一些值。 之后我刪除數組中的舊對象，然后連接新的對象。

我有我的預期，但項目的位置也發生了變化（結束）。

如何在不改變位置的情況下更改項目？

let newMedoc = {};
newMedoc.quantite = newQuantite;
newMedoc.sub_total = price;
newMedoc.nom = action.value.nom;
newMedoc.prix = action.value.prix;
newMedoc.id = action.value.id;
//Delete the item in the array
nextState = {
  ...state,
  basketOfMedicines: state.basketOfMedicines.filter(index => index !== action.value)
}
//concat a new item in the array
nextState = {
  ...nextState,
  basketOfMedicines: [...nextState.basketOfMedicines, newMedoc]
}
return nextState || state;

Answer 1

如果您要替換項目，則可以使用map而不是filter ：

nextState = {...state};
nextState.basketOfMedicines = nextState.basketOfMedicines.map(entry => entry == action.value ? newMedoc : entry);

Answer 2

只有當您的應用程序中的位置有意義時，否則不會。 但是你已經改變了方法中的當前狀態，你不應該這樣做。 你應該克隆數組，例如使用lodash cloneDeep或類似的東西。

你的newState.basketOfMedicine = state.basketOfMedicine.filter（...只包含對象的引用。請看下面的代碼以便澄清：

let oldState = [{a:100,b:200},{a:1000,b:2000},{a:10,b:20},{a:1,b:2},];

let arr = oldState.filter(elem => elem.a < 10); // [{a:1,b:2}]
let newState = [...arr] // destructuring
newState[0].a=50 // mutate
console.log(newState[0] === oldState[3]); // true 

這里來自原始的lodash文檔：

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

例如，使用lodash，可能還有其他很酷的庫。 或者你自己寫一個克隆方法。