使用Spread运算符反应副本数组不起作用 [英] React Copy Array using Spread Operator Not working

问题描述

我正在用react js状态工作，我在状态名称中有一个伪数组 jObj ，我正在使用传播运算符将其复制到变量 copy 中，然后更新了 jObj 使用功能 expandArray 不知道为什么复制变量更新这是我的两个功能

I am workng with react js state i have a fake array in my state name jObj i am copying it using spread operator into variable copy and after that updating jObj using function expandArray don't know why copy variable updating here is my both functions

 fakeMethod=()=>{
        let  jObj=[];
        jObj[0]=[];
        jObj[0]['id']=1;
        jObj[0]["title"]="parent Object";
        jObj[0]['parentId']=[];
        jObj[0]['options']=[];
        jObj[0]['options'][0]=[];
        jObj[0]['options'][0]['name']="Yes";
        jObj[0]['options'][0]['value']="yes";
        jObj[0]['options'][0]['id']=3;
        jObj[0]['options'][1]=[];
        jObj[0]['options'][1]['name']="No";
        jObj[0]['options'][1]['value']="no";
        jObj[0]['options'][1]['id']=4;
        jObj[1]=[];
        jObj[1]['id']=1;
        jObj[1]["title"]="child Object";
        jObj[1]['parentId']=[3,4];
        jObj[1]['options']=[];

        const copy=[...jObj]
        jObj=this.expandArray(jObj);
        console.log("This is orignal object")
        console.log(jObj);
        console.log("This is copy object")
        console.log(copy)
        return ""
    }
    expandArray=(input)=>{
        let result = input.map(a => a.id);
        var max_of_array = Math.max.apply(Math, result);
        var newArr = [];
        for (var i in input) {
            var first = true;
            let objCopy = Object.assign({}, input[i].parentId);
            input[i]=Object.assign(input[i],{"initObjectPos":i});
            if(input[i].parentId.length == 0){
                input[i].parentId="";
            }
            for (var x in objCopy) {
                var y = input[i];

                if (!first) {
                    y = Object.assign({}, y);
                    max_of_array++;
                    y.id = max_of_array.toString();
                    newArr.push(y);
                }
                y.parentId = objCopy[x];
                first = false;
            }
        }
        var output = input.concat(newArr);
        return output;
    }

请帮助我有关我错了的地方，我认为我正确地复制了数组，并且在expand array函数内部出现了问题非常感谢！

please help me about where i am wrong i think i am copying array correctly and something is wrong inside expand array function Thanks Much!!

推荐答案

spread运算符不会创建对象的深层克隆.由于对象的某些属性是对象本身，因此它们的副本将通过引用传递.如果要更改其属性之一，则将再次更改第一个对象.避免这种情况的最简单方法是使用lodash的cloneDeep方法. Lodash文档

The spread operator will not create a deep clone of your Object. Since some of your object's properties are objects themselves, their copy will be passed by reference. If you will change one of their attributes, your first Object will be changed again. The easiest way to avoid this is to you use lodash's cloneDeep method. Lodash Documentation

const copy=cloneDeep(jObj)

这篇关于使用Spread运算符反应副本数组不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！