无法使用 ... 运算符或 Array.from() 或 slice(0),,Javascript/React 分隔处于状态的对象数组

Question

这就是我的状态

state = {
 size: window.innerWidth <= 700 ? (window.innerWidth <= 425 ? 200 : 300) : 400,
 positions: [
   { row: 2, col: 5, value: 2, id: 1 },
   { row: 3, col: 2, value: 2, id: 2 },
 ],
}

这就是我正在做的事情

//let oldPosition = Array.from(this.state.positions);  //1 method
//let oldPosition = [...this.state.positions];         //2 method
let oldPosition = this.state.positions.slice(0);       //3 method
oldPosition[1].value = 14;

无论我在三种方法中做什么 我无法阻止状态的改变

我正在尝试复制位置并将其存储在oldPosition中，但是在更改oldPosition中的任何值时，我以某种方式更改了我的应用程序的原始状态:(

感谢您的帮助。

Answer 1

为了克隆对象数组，您可以通过映射状态数组并返回带有扩展的每个对象来创建一个新数组。

let oldPosition = this.state.positions.map(pos => ({...pos}));