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

Question

I am modifying an array of objects. And I want to change a value of an item. For that, i create a new object, the old one with some values changed. After that i delete the old object in the array, before concat the new one..

I have what I expected, but the item's position has changed also (the end).

How can I change an item without changing the position?

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

If you're replacing an item, you can use map rather than filter :

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

Answer 2

Only if the position within your application has a meaning, otherwise not. But you have changed the currentent state within your method and you should not do that. You should clone the array, eg with lodash cloneDeep or something like that.

Your newState.basketOfMedicine = state.basketOfMedicine.filter( ... holds just references to the objects. Have a look at the code below for clarification:

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 

Here from original lodash documentation:

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

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

The use of lodash ist just for example, there may be other cool libraries out there. Or you write a clone method by yourself.