在嵌套 3 级深度的对象中设置设置

Question

嗨，伙计们，我有一个问题，从头开始我会提到我已经尝试过这个和这个

我的情况如下。我有 API，它发送给我

根处于组件状态！

Root: {
RootVal1: {
Prop1: '',
Prop2: '',
Prop3: '',
}
RootVal2: [
PropObj1: {
NestedProp1: '',
NestesPropObj: {
NestedEvenMoreProp1: '',
NestedEvenMoreProp2: '',
NestedEvenMoreProp3: ''
}
},
PropObj2: {
NestedProp1: '',
NestesPropObj: {
NestedEvenMoreProp1: '',
NestedEvenMoreProp2: '',
NestedEvenMoreProp3: ''
}
},
PropObj3: {
NestedProp1: '',
NestesPropObj: {
NestedEvenMoreProp1: '',
NestedEvenMoreProp2: '',
NestedEvenMoreProp3: ''
}
},
]
}

如何使用setState更新Prop1、Prop2、Prop3、NestedEvenMoreProp1、NestedEvenMoreProp2、NestedEvenMoreProp3？ 最后一个约束是我不能更改根的名称(我不能将其重命名为 newRoot 等(

我尝试的是调用此函数：

/**
* @summary update state using immutable object
* @param {Object} name of key and value for update
* @returns {string} Promise that returns
*/
updateStateHelper = target => new Promise((resolve) => {
const updatedState =
update(this.state[target.name], { $merge: { [target.name]: target.value } });
this.setState(prevState => ({
...prevState,
updatedState,
}), () => resolve(this.state[target.name]));
});

如下：

// data[0] and data[1] is just copy of RootVal2 and RootVal1, with changed values. 
data[0]
data[1]
const root = Object.assign({}, this.state.root);
root.RootVal2 = [...data[0].RootVal2];
root.RootVal1 =  {...data[1]};
//Here root displays edited 
console.log(root);
this.updateStateHelper({name: 'root', value: root,})
.then(() => {
//Here root displays without the edit
console.log(this.state.root);
resolve('Success');
});

Answer 1

您可以使用Spead运算符。

示例(更新Prop1、Prop2和Prop3(：

this.setState({
Root:
...this.state.Root, 
RootVal1: {
...this.state.Root.RootVal1,
Prop1: "Prop1 value here",
Prop2: "Prop2 value here",
Prop3: "Prop3 value here"
}
}
);

更多信息在这里(感谢@TelmosDias(