React状态变更时如何更新state数组内的指定键值？

原有写法失效是两个原因导致的：

• 语法层面：JavaScript对象字面量不支持tableData[key].s_rate: xxx这种嵌套属性直接赋值的写法，代码运行时会直接抛出语法错误。
• React规则层面：直接修改state中数组、对象的内部属性，违反了React state更新的不可变原则，React无法检测到原state引用的变化，不会触发视图重渲染。
  另外你代码里还有个隐藏问题：Range组件回传的values是和你传入格式一致的数组，直接对整个数组执行parseInt(values)会得到NaN，需要取数组的第一个元素做转换。

更新数组类型的state时，需要先创建原数组的浅拷贝，修改拷贝后对应索引的内容，再将新数组传入setState：

onSliderChangeS = (values, key) => {
  // 浅拷贝原数组，不直接修改原state的引用
  const updatedTableData = [...this.state.tableData]
  // 浅拷贝对应索引的项，更新s_rate字段
  updatedTableData[key] = {
    ...updatedTableData[key],
    s_rate: parseInt(values[0])
  }

  this.setState({
    valuesS: values,
    tableData: updatedTableData
  })
}

补充：如果项目里嵌套更新的场景很多，可以引入Immer库简化不可变更新的写法，不需要手动写多层浅拷贝逻辑，代码可读性会更高。

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