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

Question

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

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,
    });
}

Answer 1

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

Answer 2

仅供参考：此主题已广泛涵盖 , and even is recommended not to use nested states, according to this 。

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

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

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

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

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

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

update nested value of state using dynamic key

setstate

react-native