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

有没有一种方法可以更改对象数组中的项目而不更改其位置？

2 个答案: