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

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

我的组件中有一个状态，我想在单击“保存”按钮时更改此状态，然后更改并删除克隆的某些属性，然后发布到后端，但是当我更改克隆数组时，将保留原始状态也改变;我不知道该怎么办，我追踪了所有克隆数组的方法，但是它们都没有帮助我；以下是我的代码：

.
.
.
    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,title : 'SubItem 11 content',approverType : 2,approverId : 1,}
            ]
          },{
            id: 2,// content: "item 2 content",subItems: [
              {
                id: 20,hasWorkflow : false,title : 'SubItem 20 content',approverId : 4,{
                id: 21,title : 'SubItem 21 content',approverId :  3,{
            id: 3,content: "item 3 content",subItems: [
              {
                id: 55,approverId : 6,{
                id: 66,}
            ]
          }
    ]);
.
.
.
.
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);
            });
    }

解决方法

要进行深复制，请尝试此

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

或

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

传播语法无法提供深层复制

深拷贝

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

要获得更多说明和更好的理解，可以参考How do you clone an Array in Javascript?

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

const newArr = _.cloneDeep( steps );

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