设置在对象中的设置嵌套深度为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 ？ 最后一个约束是我无法更改root的名称（我无法将其重命名为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）