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

【问题标题】：Can't separate array of object in state using ... operator or Array.from() or or slice(0),,Javascript/React无法使用 ... 运算符或 Array.from() 或 slice(0),,Javascript/React 分隔处于状态的对象数组
【发布时间】：2021-01-12 22:54:28
【问题描述】：

这是我的状态

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;

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

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

感谢您的帮助。

【问题讨论】：

您似乎有多个问题。通常，一个问题有一个您要解决的问题是一个好主意。代码sn-ps不错，但完整代码更好。
您正在复制 positions 数组就好了。但是，您正在改变其中没有克隆的对象。请改用oldPosition[1] = {...oldPosition[1], value: 14}。

标签： javascript arrays clone spread

【解决方案1】：

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

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

【讨论】：