如何更改数组的克隆而不更改 reactjs 中的原始数组

Question

我的组件中有一个状态，我想在单击保存按钮并更改和删除克隆的某些属性然后发布到后端时克隆此状态，但是当我更改克隆数组时，原始状态也会更改；我不知道该怎么做我追踪了克隆阵列的所有方法，但所有方法都没有帮助我；以下是我的代码：...    const [steps , setSteps] = useState([        {            id: 1,            // content: "item 1 content",            subItems: [              {                id: 10,                isNew : false ,                hasWorkflow : true ,                title : 'SubItem 10 content' ,                approverType : 1,                approverId : 0 ,              },              {                id: 11,                isNew : false ,                hasWorkflow : true ,                title : 'SubItem 11 content' ,                approverType : 2,                approverId : 1 ,              }            ]          },          {            id: 2,            // content: "item 2 content",            subItems: [              {                id: 20,                isNew : false ,                hasWorkflow : false ,                title : 'SubItem 20 content' ,                approverType : 2,                approverId : 4 ,              },              {                id: 21,                isNew : false ,                hasWorkflow : false ,                title : 'SubItem 21 content' ,                approverType : 1,                approverId :  3,              }            ]          }  ,          {            id: 3,            content: "item 3 content",            subItems: [              {                id: 55,                isNew : false ,                hasWorkflow : false ,                title : 'SubItem 20 content' ,                approverType : 2,                approverId : 6 ,              },              {                id: 66,                isNew : false ,                hasWorkflow : false ,                title : 'SubItem 21 content' ,                approverType : 2,                approverId : 4 ,              }            ]          }    ]);....

Answer 1

对于深拷贝试试这个

  let _result = JSON.parse(JSON.stringify(steps));

或者

  const newArray = steps.map(step => ({...step}));

传播语法不提供深拷贝

深拷贝

深拷贝意味着实际上创建一个新数组并复制值，因为它发生的任何事情都不会影响原始数组。

为了更清楚和更好地理解，您可以参考How do you clone an Array in Javascript?

Answer 2

根据具体情况，解析和取消解析可能会对性能造成很大影响，一种方便的替代方法是，如果您在项目中使用“Lodash”，您可以像这样简单地使用cloneDeep ：

const newArr = _.cloneDeep( steps );

这将返回一个新数组，而原始数组保持不变。