React中如何使用扩展运算符更新UseState嵌套数组？

你当前的写法完全不正确，问题出在两个核心点：

1. form.equipment.push(value)会直接修改原state中的数组，React依赖状态的不可变性来检测组件是否需要重新渲染，直接修改原状态不会触发组件更新。
2. push方法的返回值是数组的新长度，不是更新后的数组，你的代码相当于把这个数字展开到form对象里，会直接破坏原有的form结构。

正确的更新方式 #

必须遵循React状态不可变原则，通过扩展运算符创建新数组来更新：

基础同步更新（适用于无异步场景）

setForm({
  ...form, // 复制原form的其他属性，保留原有字段
  equipment: [...form.equipment, value] // 创建新数组，追加新选中的设备项
});

函数式更新（推荐，避免闭包导致的旧状态问题）

如果更新逻辑在事件处理、定时器或异步回调中，推荐使用函数式更新，确保拿到最新的state：

setForm(prevForm => ({
  ...prevForm,
  equipment: [...prevForm.equipment, value]
}));

额外优化：支持复选框的选中/取消切换 #

如果需要实现「勾选添加、取消勾选移除」的逻辑，可以添加存在性判断：

const handleEquipmentToggle = (selectedItem) => {
  setForm(prevForm => {
    // 检查当前设备是否已在数组中
    const isItemExist = prevForm.equipment.some(item => item.id === selectedItem.id);
    
    if (isItemExist) {
      // 已存在则移除该项
      return {
        ...prevForm,
        equipment: prevForm.equipment.filter(item => item.id !== selectedItem.id)
      };
    } else {
      // 不存在则添加该项
      return {
        ...prevForm,
        equipment: [...prevForm.equipment, selectedItem]
      };
    }
  });
};

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