React如何使用变量作为key更新嵌套对象的setState状态

错误原因 #

你编写的更新代码存在语法错误：计算属性语法[变量]仅可用于声明对象的键名，不能直接链式调用.food来修改嵌套对象的属性，因此无法正常执行。

修复代码 #

setStudent(prev => ({
  ...prev,
  [randomStudent]: {
    ...prev[randomStudent],
    food: "steak"
  }
}))

实现逻辑 #

• 首先通过...prev解构原有student对象的全部属性，保留其他未修改学生的数据
• 外层使用计算属性[randomStudent]动态指定需要更新的学生键
• 内层先解构当前要修改的学生对象的原有属性...prev[randomStudent]，避免丢失id等其他字段，再覆盖food属性为目标值steak

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