如何独立处理来自同一JSON的多个RadioButton组？

我从数据库获取多个modifierGroups（例如“Size”“Gluten?”），每个组内包含多个可选modifier选项，比如“Size”组包含15oz、20oz选项。

当前问题：Size和Gluten?组的单选按钮无法独立供用户选择，选了其中一组的选项后，另一组的选项就会被取消选中。

数据库返回的JSON数据 #

{"id": "cl9t45hry002xvpr91nppx7rx","image": "https://madre-cafe.com/wp-content/uploads/2021/11/logo-madre-cafe-header.svg","name": "Especiales Item #1","description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.","price": "291","available": true,"menuCategoryId": "cl9t45hqu000tvpr9fjw67ype","modifierGroups": [{"id": "cl9x4v8xr0005vpuax56i2z7r","name": "Size","minSelectionAllowed": null,"maxSelectionAllowed": null,"isMandatory": true,"menuItemId": "cl9t45hry002xvpr91nppx7rx","orderItemId": null,"modifiers": [{"id": "cl9x4wm7l0007vpualwl5zyac","type": "15 oz","mandatorySelected": true,"onlyOne": null,"multiSelect": null,"mandatoryOneMultiSelect": null,"modifierGroupId": "cl9x4v8xr0005vpuax56i2z7r"},{"id": "cl9x4uual0003vpuax7rtny7b","type": "20 oz","mandatorySelected": true,"onlyOne": null,"multiSelect": null,"mandatoryOneMultiSelect": null,"modifierGroupId": "cl9x4v8xr0005vpuax56i2z7r"}]},{"id": "cl9xm0x2b000hvpuaxzyc7oht","name": "Gluten?","minSelectionAllowed": null,"maxSelectionAllowed": null,"isMandatory": false,"menuItemId": "cl9t45hry002xvpr91nppx7rx","orderItemId": null,"modifiers": [{"id": "cl9xm1l27000jvpuajisqm3hl","type": "Without gluten","mandatorySelected": null,"onlyOne": null,"multiSelect": null,"mandatoryOneMultiSelect": null,"modifierGroupId": "cl9xm0x2b000hvpuaxzyc7oht"},{"id": "cl9xm1u8z000lvpuazch4ui1s","type": "With Gluten","mandatorySelected": null,"onlyOne": null,"multiSelect": null,"mandatoryOneMultiSelect": null,"modifierGroupId": "cl9xm0x2b000hvpuaxzyc7oht"}]}]}

当前实现代码 #

{modifierGroups.map((mGroup, index) => {
    let { modifiers } = mGroup;

    return (
      <div key={mGroup.id} className="bg-red-200">
        <label> {mGroup.name}</label>
        <input type="radio" name="modifier" value={modifiers.map((a) => a.type)}  />
        {modifiers.map((m, i) => {
          return (
            <div key={m.key} className="bg-green-200">
              <input
                type="radio"
                id={m.id}
                name="modifier"
                onChange={(e) => setRadioButton({ ...radioButton, items: e.target.value })}
                value={modifiers}
              />
              <button className="ring-1 ring-black h-3 w-3 active:bg-blue-200 focus:bg-slate-600" />
              <label htmlFor={m.id}>{m.type}</label>
            </div>
          );
        })}

问题原因 #

所有单选按钮的name属性都设为了"modifier"，HTML规则中同一name的单选按钮会被归为同一组，同一时间只能选中该组内的一个选项，因此Size和Gluten?组的单选会互相干扰，无法独立选择。

解决方法 #

给每个modifierGroup的单选按钮设置唯一的name值，比如用分组的id作为name的后缀，确保不同组的单选name不重复。同时修正几个细节问题：

1. 删除多余的外层单选按钮
2. 将value设为当前modifier的具体值（如m.type或m.id），而非整个modifiers数组
3. 用m.id作为循环的key（原数据中没有m.key字段）

修改后的代码：

{modifierGroups.map((mGroup) => {
  const { modifiers, id: groupId, name: groupName } = mGroup;

  return (
    <div key={groupId} className="bg-red-200">
      <label>{groupName}</label>
      {modifiers.map((m) => {
        return (
          <div key={m.id} className="bg-green-200">
            <input
              type="radio"
              id={m.id}
              {/* 用分组ID作为name的一部分，确保每组单选独立 */}
              name={`modifier-${groupId}`}
              onChange={(e) => {
                // 按分组存储选中值，便于后续获取各组选择结果
                setRadioButton(prev => ({
                  ...prev,
                  [groupId]: e.target.value
                }));
              }}
              // 设置为当前modifier的类型值，按需可替换为m.id
              value={m.type}
              // 可选：根据数据中的mandatorySelected设置默认选中状态
              checked={m.mandatorySelected}
            />
            <button className="ring-1 ring-black h-3 w-3 active:bg-blue-200 focus:bg-slate-600" />
            <label htmlFor={m.id}>{m.type}</label>
          </div>
        );
      })}
    </div>
  );
})}

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