Question

我想使用ES6扩展运算符更新我的reducer中给定索引处的数组项...这就是我正在做的事

let array = action.payload.items;
return [...array, array[3].id:555]

通过这种方式编辑非常有效，但它也在数组中添加了一个额外的项目。

任何帮助???

Answer 1

使用索引获取项目，克隆项目并使用Object#assign更改id。使用Array#slice和spread创建新数组，将更新的项目插入新数组中的正确位置：

const items = [{ id: 1 }, { id: 2 }, { id: 3 }]; // action.payload.items

const index = 1;

const itemToUpdate = Object.assign({}, items[index], { id: 1000});

const result = [...items.slice(0, index), itemToUpdate, ...items.slice(index + 1)]; // return ...

console.log(result);

Answer 2

请在此处考虑此答案：https://stackoverflow.com/a/34582848/51428

通过在yiu删除元素的索引中插入新对象，这很容易适用于您的问题。

考虑保持旧元素的完整性，这样您也可以使用spread来创建新元素

const itemToUpdate = {...items[index], id: 1000}

React JS使用spread运算符编辑数组的第一项

2 个答案: