正确更新状态数组中给定索引处的项目

Question

与this post不同，我不想在数组中添加新项目，但是我想修改索引i上的项目。

除了像这样深度克隆整个数组之外，还有其他解决方案吗？

const oldList = this.state.list;
let newList = JSON.parse(JSON.stringify(oldList));
newList[i] = "foo";
this.setState({list: newList});

谢谢您的帮助。

Answer 1

您可以使用点差。

const oldList = this.state.list;
let newList = [...oldList];
newList[i] = "foo";
this.setState({ .list: newList });

但是，如果数组的元素是对象，则扩展将不起作用。因为它将仅创建引用旧对象的数组的新副本。但在您的情况下，您分配字符串。所以它是原始类型。

---

  

所以，如果我是对的，则散布运算符将基本上进行深度克隆

Spread进行浅克隆。将array spread与创建新数组一样，并将所有旧值复制到新数组中

a = [...b];

与

相同

a = [];
for(let i = 0; i < b.length; i++) a.push(b[i]);

  

因为Vue会覆盖诸如push（...）之类的数组上的变异方法

对于推送，您还可以使用spread

a = [...b, 'new item'];

对于流行音乐，您可以使用splice

a = b.slice(-1, 1);