React中如何正确保存单选按钮状态？解决两次点击与数组追加问题

我使用Map存储单选按钮的状态，但用户选择时无法正确保存/更新状态。我的Map结构如下：

{
    "Group A": [
        {
            "label": "Mark",
            "value": "mark"
        }
    ],
    "Group B": [
        {
            "label": "Steve",
            "value": "steve"
        }
    ]
}

需求是用户选择后，新选项要成为对应数组的唯一元素（单选按钮每组仅能选中一个选项）。目前能正常打印Map，但存在两个问题：

• 同组内选择选项时需点击两次才能选中。
• 切换选项时，新选中的选项会被追加到数组中，而非替换原有选项。

处理onChange事件的代码如下：

const handleRadiobuttonChange = (field, isChecked) => {
    setCheckboxStates((prevState) => {
      const next = new Map(prevState);
      const a = isChecked
        ? [
            ...(next.get(post.label) ?? []),
            { label: field.name, value: field.value }
          ]
        : next.get(post.label)?.filter((o) => o.label !== field.name);
      a.length ? next.set(post.label, a) : next.delete(post.label);
      return next;
    });
};

问题修复方案 #

问题原因 #

你的代码逻辑照搬了多选框的状态管理逻辑，完全不符合单选按钮的特性：

1. 单选组内只能有一个选项被选中，不需要处理“取消选中”分支，点击某个选项就意味着它是当前组的唯一选中项。
2. 你当前把新选项追加到数组而非直接替换，导致选项堆积；同时依赖isChecked参数判断操作，和单选按钮原生选中状态冲突，引发点击两次才生效的问题。

修正后的代码 #

const handleRadiobuttonChange = (field) => {
    setCheckboxStates((prevState) => {
      const next = new Map(prevState);
      // 单选组直接替换为当前选中的选项，无需追加或过滤
      next.set(post.label, [{ label: field.name, value: field.value }]);
      return next;
    });
};

关键优化点 #

• 移除isChecked参数：单选按钮触发onChange时，当前点击的选项必然是要选中的，无需额外判断。
• 确保同组单选按钮设置相同的name属性：这是HTML单选按钮的原生要求，浏览器会自动管理组内选中状态，避免逻辑混乱。

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