React useState 如何仅修改状态数组中单个对象的特定值

当前handleChangeHealth的更新逻辑存在本质偏差，甚至会触发语法错误：

• 把动态键值对[event.target.name]: event.target.checked写在数组字面量中是语法错误——数组结构不支持键值对写法，这种写法本来是对象字面量的属性定义语法，直接运行会抛出解析异常
• 就算修正语法结构，原来的逻辑也完全没有匹配数组现有对象的环节：即便把追加内容换成对象形式，也只会给数组末尾新增一个冗余元素，根本不会修改数组中已有的、和复选框同名的配置对象，多次触发后数组结构会被持续污染，完全达不到单对象属性更新的效果

要实现「仅修改匹配项的checked值、其余对象完全保留原有属性」的需求，核心逻辑是通过数组map方法遍历更新：

• 遍历状态数组的每一项，通过name值和事件触发的复选框名称做匹配
• 匹配成功的项，返回一个全新的对象：展开原对象的所有属性，仅覆写checked为事件获取的选中状态
• 匹配失败的项直接返回原对象，不做任何修改，保证非目标项的引用不发生变化

对应的完整可运行代码：

const [checkedHealth, setCheckedHealth] = useState(checkboxHealthLabels);

const handleChangeHealth = (event) => {
  const { name: targetName, checked: targetValue } = event.target;
  setCheckedHealth(prevState => 
    prevState.map(item => 
      item.name === targetName 
        ? { ...item, checked: targetValue }
        : item
    )
  )
}

• 这里采用setCheckedHealth的函数式更新写法，能保证拿到的prevState永远是最新的状态快照，避免闭包缓存旧值导致的更新异常
• 对匹配到的目标项要返回全新的对象做更新，不能直接修改原对象的属性值，否则无法触发React的状态重渲染机制
• 如果担心直接复用常量数组作为初始值会带来引用共享的副作用，可以在初始化state时做一层浅拷贝：useState(() => checkboxHealthLabels.map(item => ({ ...item })))，从根源上避免误修改原常量影响应用状态

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