有没有办法在不改变位置的情况下更改对象数组中的项目？

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，可能还有其他很酷的库。 或者你自己写一个克隆方法。