如何通过传入的动态分组key和字段key更新React嵌套state？

你原有的写法存在两处问题：

• JS对象语法不支持直接用[groupKey][key]的形式为嵌套的动态键赋值
• 代码中使用的manualRange、value都是未定义变量，和你声明的state、入参newValue不匹配

正确实现代码 #

const updateState = (groupKey, key, newValue) => {
  // 使用函数式更新确保拿到最新的state值，避免闭包导致的旧state问题
  setState(prevState => ({
    // 浅拷贝最外层state，保留未修改的分组数据
    ...prevState,
    [groupKey]: {
      // 浅拷贝当前分组的原有数据，避免覆盖同分组下其他未修改的字段
      ...prevState[groupKey],
      // 为目标字段赋新值
      [key]: newValue
    }
  }))
}

核心逻辑说明 #

React要求state为不可变数据，修改嵌套对象时需要逐层对要修改的层级做浅拷贝，不能直接修改原state对象，否则会导致组件无法正常触发重新渲染。

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