javascript - 如何更改数组的克隆而不更改 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}));

spread syntax doesn't give a deep copy

深拷贝

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

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