обновить вложенное значение состояния с помощью динамического ключа

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 => ({
  [dynamicKey]: {
  ...prevState[dynamicKey],
  grade: { 
    ...prevState[dynamicKey].grade,
    science: "Z"
  },
}));

Или, если динамический ключ связан с определенным атрибутом:

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

Может использоваться одна или несколько динамических клавиш, и оператор распространения может использоваться для каждого вложенного уровня (хотя при таком подходе код начнет выглядеть уродливым / грязным).

Answer 2

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