React菜单产品构建器：实现按组单选附加项并更新列表

你的核心问题是状态更新时未处理同组旧附加项，导致重复添加。只需修改setBuildMenuExtras的逻辑，添加新项前先移除当前组已有的项，就能实现每组单选的效果。

修改状态更新代码 #

把原来直接追加新项的逻辑，改成先过滤同组旧项再添加新项：

const [buildMenuExtras, setBuildMenuExtras] = useState([]);
setBuildMenuExtras((prevExtras) => [
  // 保留所有非当前组的附加项
  ...prevExtras.filter(extra => extra.productGroupId !== activeTab),
  // 添加当前选中的新附加项
  {
    id: menuExtraId,
    name: menuExtraName,
    price: menuExtraPrice,
    quant: menuExtraQuant,
    atts: menuExtraCheckedAtts,
    productGroupId: activeTab,
  },
]);   

逻辑说明 #

• prevExtras.filter(extra => extra.productGroupId !== activeTab)：遍历之前的附加项数组，只保留不属于当前选中组（activeTab对应的组）的项，相当于清空当前组的旧选择。
• 随后将新选中的附加项加入数组，这样每组永远只会保留最新选择的那一项，自动取消同组旧项。

渲染部分无需修改 #

你的渲染代码逻辑是正确的，过滤出当前组的附加项后渲染，现在每组只会有一个项，渲染结果就是每组显示当前选中的内容，符合需求。

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