如何在React中使用new Map()存储复选框选中状态？

1. 初始化Map状态 #

将原有的普通对象状态替换为Map类型，键为分组名称（如"Group A"），值为对应分组的选中项数组：

import { useState } from 'react';

// 定义类型（TypeScript可选）
type CheckboxOption = { label: string; value: string };
type CheckboxStateMap = Map<string, CheckboxOption[]>;

const [checkboxStates, setCheckboxStates] = useState<CheckboxStateMap>(new Map());

2. 重构复选框变更处理函数 #

针对分组数组做增删操作，避免直接修改原Map（确保React能触发重渲染）：

const handleCheckboxChange = (groupName: string, option: CheckboxOption, isChecked: boolean) => {
  setCheckboxStates(prevMap => {
    // 复制原Map生成新实例
    const newMap = new Map(prevMap);
    // 获取当前分组的已选列表，无数据则初始化空数组
    const currentGroupItems = newMap.get(groupName) || [];

    if (isChecked) {
      // 避免重复添加，用value做唯一标识
      if (!currentGroupItems.some(item => item.value === option.value)) {
        newMap.set(groupName, [...currentGroupItems, option]);
      }
    } else {
      // 移除指定选项
      const updatedItems = currentGroupItems.filter(item => item.value !== option.value);
      if (updatedItems.length > 0) {
        newMap.set(groupName, updatedItems);
      } else {
        // 分组无选中项时，可选择删除该分组键（可选操作）
        newMap.delete(groupName);
      }
    }

    return newMap;
  });
};

3. 组件中使用Map状态渲染复选框 #

渲染时通过Map.get()判断当前选项是否被选中：

// 示例：渲染Group A的复选框列表
const groupAOptions = [{ label: "Mike", value: "mike" }, { label: "John", value: "john" }];

return (
  <div>
    <h3>Group A</h3>
    {groupAOptions.map(option => (
      <label key={option.value} style={{ display: "block" }}>
        <input
          type="checkbox"
          checked={checkboxStates.get("Group A")?.some(item => item.value === option.value) || false}
          onChange={(e) => handleCheckboxChange("Group A", option, e.target.checked)}
        />
        {option.label}
      </label>
    ))}
  </div>
);

4. 转换为目标对象格式（可选） #

如果需要将Map转换为你期望的普通对象格式（如提交表单时），可以用Object.fromEntries()：

const getFormattedState = () => {
  return Object.fromEntries(checkboxStates);
};

// 调用后得到的结构：
// {
//   "Group A": [{label: "Mike", value: "mike"}],
//   "Group B": [{label: "Laura", value: "laura"}],
// }

核心注意事项 #

• 必须返回新的Map实例更新状态，不能直接修改原Map，否则React无法感知状态变化
• 用value作为选项的唯一标识比label更可靠，避免因标签重复导致逻辑错误
• 分组无选中项时是否保留空数组，可根据业务需求调整删除/保留逻辑

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