如何使用动态键更新React State中的嵌套Grade对象？

我来帮你搞定这个问题！先看你给出的State结构：

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

你之前尝试的两种方法都有明显问题：

• 第一种里... dyamicKey.grade完全错误，dynamicKey是字符串（比如'id1'），它根本没有grade属性，这会直接导致报错；而且你更新时只处理了grade，把原来的name字段给弄丢了。
• 第二种没写完，但估计也是犯了类似的嵌套更新没处理好的问题。

下面给你两种正确的实现方案，对应不同的需求：

方案1：完全替换指定id的grade对象 #

如果你想直接把某个id下的grade整个换成新的对象，用这个方法：

updateGrade(gradeObj, dynamicKey) {
  // 用函数式setState基于前一个状态更新，避免异步更新导致的问题
  this.setState(prevState => ({
    [dynamicKey]: {
      // 先复制该id下原来的所有属性（比如name），避免丢失
      ...prevState[dynamicKey],
      // 覆盖grade为新的对象
      grade: gradeObj
    }
  }));
}

比如调用updateGrade({science: 'B', maths: 'B'}, 'id1')，id1的grade就会被完全替换，同时name还是保留'XYZ'。

方案2：合并更新grade的部分属性 #

如果你只想更新grade里的某几个科目（比如只改maths，保留science），用这个方法：

updateGrade(partialGradeObj, dynamicKey) {
  this.setState(prevState => ({
    [dynamicKey]: {
      // 保留该id下的原有属性（name）
      ...prevState[dynamicKey],
      grade: {
        // 保留grade里原来的所有科目
        ...prevState[dynamicKey].grade,
        // 合并新的科目属性，覆盖旧值
        ...partialGradeObj
      }
    }
  }));
}

比如调用updateGrade({maths: 'B'}, 'id1')，id1的grade会变成science: 'A', maths: 'B'，name依然是'XYZ'。

关键注意点 #

• 一定要用函数式setState（也就是给setState传函数），因为State更新是异步的，基于前一个状态更新能避免状态不一致的问题。
• 嵌套对象更新时，要逐层用扩展运算符...保留原有属性，不能直接覆盖整个对象，否则会丢失其他字段（比如name）。
• dynamicKey是字符串，要通过prevState[dynamicKey]来访问对应的对象，不能直接把它当成对象用。

内容的提问来源于stack exchange，提问作者JiteshW