使用动态键更新状态的嵌套值答案

【问题标题】：update nested value of state using dynamic key使用动态键更新状态的嵌套值
【发布时间】：2018-05-07 13:37:29
【问题描述】：

我想使用动态键更改状态的等级对象。下面是我的代码

state = {
            id1: {
                name: 'XYZ',
                grade: {
                    science: 'A',
                    maths: 'C',
                },
            },
            id2: {
                name: 'ABC',
                grade: {
                    science: 'A+',
                    maths: 'A+',
                },
            },
}

我尝试了几件事，但找不到成功的结果。

updateGrade(gradeObj, dyamicKey) { // dyamicKey will be id1, id2
    this.setState({
        [dyamicKey]: {
            ... dyamicKey.grade,
            grade: gradeObj,
        },
    });
}

updateGrade(gradeObj, dyamicKey) { // dyamicKey will be id1, id2
    this.setState({
        [dyamicKey[grade]]: gradeObj,
    });
}

【问题讨论】：

标签： react-native setstate

【解决方案1】：

this.setState(prevState => ({
  [dyamicKey]: {
    ...prevState[dyamicKey],
    grade: gradeObj,
  },
}));

【讨论】：

【解决方案2】：

仅供参考：这个话题被广泛覆盖here，甚至建议不要使用嵌套状态，根据这个answer。

作为对第一个答案和后续答案的额外评论，如果您的状态中有两个或多个嵌套值并且您想要更新单个嵌套值，您可以执行以下操作：

this.setState(prevState => ({
  [dynamicKey]: {
  ...prevState[dynamicKey],
  grade: { 
    ...prevState[dynamicKey].grade,
    science: "Z"
  },
}));

或者，如果动态键与特定属性相关：

this.setState(prevState => ({
  id1: {
  ...prevState.id1,
  grade: { 
    ...prevState.id1.grade,
    [dynamicKey]: "Z"
  },
}));

可以使用一个或多个动态键，并且扩展运算符可以用于每个嵌套级别（尽管使用这种方法代码会开始看起来很丑/脏）。

【讨论】：