如何通过复选框更新useState中的锤子ID数组

步骤1：编写复选框状态处理函数 #

新增一个专门处理锤子复选框状态的函数，利用React的函数式更新确保操作基于最新的form状态：

// 先定义锤子的类型（如果还没定义）
interface Hammer {
  _id: string;
  // 其他锤子相关字段，比如名称、型号等
}

// 处理复选框勾选/取消逻辑
const handleHammerToggle = (hammerId: string) => {
  setForm(prevForm => {
    const isChecked = prevForm.hammers.includes(hammerId);
    return {
      ...prevForm,
      hammers: isChecked
        // 已存在则移除该ID
        ? prevForm.hammers.filter(id => id !== hammerId)
        // 不存在则添加该ID
        : [...prevForm.hammers, hammerId]
    };
  });
};

步骤2：在表格复选框中绑定该函数 #

循环渲染锤子列表的表格行时，给每个复选框绑定handleHammerToggle并传入当前锤子的_id：

{/* 假设hammersList是请求返回的锤子数组 */}
<table>
  <tbody>
    {hammersList.map((hammer: Hammer) => (
      <tr key={hammer._id}>
        <td>
          <input
            type="checkbox"
            // 同步复选框选中状态与form数据
            checked={form.hammers.includes(hammer._id)}
            onChange={() => handleHammerToggle(hammer._id)}
          />
        </td>
        <td>{hammer.name}</td>
        {/* 其他锤子信息列 */}
      </tr>
    ))}
  </tbody>
</table>

关键说明 #

• 函数式更新：因为hammers数组的修改依赖于之前的状态，用函数式更新能确保拿到最新的prevForm，避免状态不一致问题。
• 选中状态同步：通过checked={form.hammers.includes(hammer._id)}让复选框状态始终和form中的hammers数组保持一致，比如编辑订单时已选锤子会自动勾选。

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