无法使用 ... 运算符或 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;

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

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

感谢您的帮助。

Answer 1

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

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

无法使用 ... 运算符或 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

javascript

arrays

clone

spread