javascript - 从数组中删除元素和突变的问题

Question

要从数组中删除元素而不改变状态，我在下面编写了这段代码，效果很好

const tmp = [ ...array ]
tmp.splice(i, 1)
setArray(tmp)

我稍微研究了一下代码，然后尝试了这个

array.splice(i, 1)
setArray([ ...array ])

但是我在用户界面中遇到了奇怪的行为。

那么这段代码有什么问题，因为我认为我没有改变状态，不是吗？

Answer 1

拼接 mutates the existing array :

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

在第一个代码中，您首先创建了数组的副本，因此发生变化的不是处于状态的对象，因此一切都很好。但在第二个代码中，您正在改变原始数组，如果您需要不可变的东西，这就是一个问题。 (尽管您随后传播了变异的原始数组的副本，但原始数组仍然发生了变异。)

例如:

const setArray = (newArray) => {
  // do something
};

const array = [1, 2, 3, 4];
const i = 2;

array.splice(i, 1)
setArray([ ...array ])

// Original array has been mutated:
console.log(array);

您也可以使用slice来代替:

const newArr = array.slice(0, i).concat(i + 1);
setArray(newArr);