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

仅供参考：根据此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"
  },
}));

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

使用动态密钥更新状态的嵌套值

2 个答案: