无法使用...运算符或Array.from或slice0，Javascript / React分离状态为对象的数组

问题描述

这是我的状态

state = {
 size: window.innerWidth <= 700 ? (window.innerWidth <= 425 ? 200 : 300) : 400,positions: [
   { row: 2,col: 5,value: 2,id: 1 },{ row: 3,col: 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中的任何值时，我都会以某种方式更改我的应用的原始状态：（

感谢您的帮助。

解决方法

为了克隆对象数组，您可以通过在状态数组上进行映射并使用散点图返回每个对象来创建新数组。

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