设置在对象嵌套 3 级深

Question

大家好，我有一个问题，从一开始我会提到我已经尝试过this和this

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

Root 处于组件状态！

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 Operator。

示例（更新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"
    }
  }
);

更多信息here（感谢@TelmosDias）