React useState如何更新对象状态并使用数值类型变量作为动态键？

根因说明 #

• 你碰到的NaN键问题，本质是parseInt(event.target.id)执行失败返回了NaN：JS对象的键会自动转为字符串，NaN转字符串后就成了"NaN"，对应你看到的异常键。
• 额外提一句：JS里对象的数字键实际会自动存储为字符串格式，你用数字0和字符串"0"作为键取值是等价的，不影响正常使用，不需要强行要求键是数字类型。

修复步骤 #

1. 先校验并处理ID的取值：检查触发事件的DOM元素id属性是否为纯数字，如果是带前缀的格式（比如doctor-1、quota-2），需要先提取出数字部分再做转换，同时给parseInt指定进制参数避免异常解析。
2. 建议使用setState的函数式更新写法，避免依赖外部state可能产生的闭包陷阱，保证拿到的永远是最新的状态值。

可用代码示例 #

const updateDoctorQuota = (event) => {
  // 提取ID：如果id带前缀可先拆分，比如id为"quota-1"的场景
  const rawId = event.target.id.includes('-') 
    ? event.target.id.split('-')[1] 
    : event.target.id;
  // 指定10进制转换
  const id = parseInt(rawId, 10);
  const value = parseInt(event.target.value, 10);

  // 校验数值合法性，非法输入直接跳过更新
  if (isNaN(id) || isNaN(value)) return;

  // 函数式更新获取最新的prevState
  setFormState(prevState => ({
    ...prevState,
    doctorQuotas: {
      ...prevState.doctorQuotas,
      [id]: value
    }
  }));
}

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