如何在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 ,
              }
            ]
          }
    ]);
.
.
.
.
function handleSaveWorkflow(){
        //const _result = steps.slice(0);
        let _result = [...steps];
        _result.map((item , index) => {
            item.subItems.map((i , ind) => {
                delete i.hasWorkflow;
                if(i.isNew){
                    i.id = null;
                }
                delete i.isNew;
                return i;
            });
            return item;
        });
        const _final = {"steps" : [..._result]};
        console.log('result : : : : : : :: : :: : ' , _final);
        console.log('steps : : : : : : :: : :: : ' , steps);
        // alert(_final);
        workflowAxios.post(`/workflow-templates/${props.id}/workflow-template-steps` , '' , _final)
            .then(response => {
                console.log('response e e e e e e e : ' , response);
                // setSteps(response);
            })
            .catch(error => {
                console.log('error r r r r r r r r r : ' , error);
            });
    }
    

Answer 1

对于深度复制试试这个

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

或者

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

扩展语法不提供深层复制

深拷贝

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

为了获得更多说明和更好的理解，您可以参考如何在 Javascript 中克隆数组？