React中如何正确更新数组对象状态？第一种写法为何出错？

你第一种写法的问题很直接：你不是在替换原数组里的目标对象，而是把修改后的对象追加到了数组末尾。

看这段代码：

setList([
  ...list,
  { ...list[changeRecordIndex], taskText: liItem.innerText }
]);

...list会把原数组的所有元素完整展开到新数组中，之后你又在数组末尾额外添加了一个修改后的目标对象——这就导致原数组里的目标对象还停留在原来的索引位置，你又多塞了一个修改后的版本进去，最终数组里自然会同时存在两个相似但taskText属性不同的对象：一个是原位置的旧对象，一个是数组末尾的新对象。

而第二种写法是标准的正确操作：

const newArr = [...list];
newArr[changeRecordIndex] = {
  ...newArr[changeRecordIndex],
  taskText: liItem.innerText
};
setList(newArr);

[...list]先复制出一个和原数组完全一致的新数组，接着通过索引changeRecordIndex直接替换掉该位置的对象，最后把修改后的新数组传给setList。这种方式既遵循了React状态更新的不可变原则，又保证了数组长度不变，只是目标位置的对象被更新，所以结果完全符合预期。

如果想用更简洁的写法实现正确更新，也可以用数组的map方法：

setList(list.map(item => 
  item.id === recordID ? { ...item, taskText: liItem.innerText } : item
));

这种方式会遍历数组，仅修改匹配id的目标对象，其余对象保持原样，同样是符合规范的状态更新写法。

内容的提问来源于stack exchange，提问作者Nick