React Hook对象状态更新：循环map时误生成新键的问题排查

这问题我之前开发时也踩过坑！核心是你忽略了JavaScript对象字面量里的计算属性名语法～

为什么会生成"item"这个键？ #

当你直接写 { ...checkList, item: event.target.checked } 时，JavaScript 会把 item 当成一个固定的字符串键名，而不是你循环中 item 变量的实际值（比如"checkA"、"checkB"这些）。所以每次更新都会新增一个名为"item"的键，而不是修改你想要的目标键。

正确的写法 #

要让变量作为对象的键名，需要用方括号把变量包裹起来，这就是计算属性名的用法：

setCheckList({ ...checkList, [item]: event.target.checked });

这样方括号里的item会被解析成它的实际值（比如当前循环到的"checkC"），就能正确对应到你state里的目标键了。

额外优化：使用函数式更新 #

如果你的复选框更新可能存在连续操作的场景，更推荐用函数式更新的方式，这样能确保每次拿到的都是最新的state值，避免闭包导致的旧state问题：

setCheckList(prevCheckList => ({
  ...prevCheckList,
  [item]: event.target.checked
}));

完整示例代码 #

假设你是通过遍历state的键来渲染复选框，完整的写法大概是这样：

{Object.keys(checkList).map(checkKey => (
  <div key={checkKey}>
    <label>
      <input
        type="checkbox"
        checked={checkList[checkKey]}
        onChange={(e) => {
          setCheckList(prev => ({ ...prev, [checkKey]: e.target.checked }));
        }}
      />
      {checkKey}
    </label>
  </div>
))}

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