[英]using the spread operator in react setState on array of objects
[英]React Copy Array using Spread Operator Not working
我正在使用 react js state 我在我的 state 名稱jObj中有一個假數組我正在使用擴展運算符將其復制到變量副本中,然后使用 function expandArray更新jObj不知道為什么復制變量在這里更新是我的兩個函數
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;
}
請幫助我了解我錯在哪里我認為我正在正確復制數組並且擴展數組內部有問題function非常感謝!!
傳播運算符不會創建 Object 的深度克隆。由於對象的某些屬性本身就是對象,因此它們的副本將通過引用傳遞。 如果您要更改它們的其中一個屬性,您的第一個 Object 將再次更改。 避免這種情況的最簡單方法是使用 lodash 的 cloneDeep 方法。 Lodash 文檔
const copy=cloneDeep(jObj)
問題是您正在創建一個空數組,而不是 fakeMethod() 中的對象數組。 如果您查看以下代碼,您會發現在創建 jObj[0]、jObj[1]、jObj[0]['options'][0] 時出錯;
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']=[];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.