React下拉列表中optgroup标签重复显示问题求助

问题根源：当前代码遍历periodLists时，每一条数据都生成一个独立的<optgroup>，导致同一分类的标签重复出现。要实现同一分类下的选项归在同一个optgroup里，需先对数据按period_category分组，再进行渲染。

解决步骤： #

1. 对数据进行分组处理
   在组件中添加数据分组逻辑，使用reduce方法将同分类的数据聚合到一起：

   // 按period_category字段分组
   const groupedPeriods = periodLists.reduce((acc, item) => {
     if (!acc[item.period_category]) {
       acc[item.period_category] = [];
     }
     acc[item.period_category].push(item);
     return acc;
   }, {});
   

2. 修改下拉组件的渲染逻辑
   遍历分组后的数据，为每个分类生成一个optgroup，并在其中渲染该分类下的所有选项：

   <Input
       id="period"
       name="period"
       type="select"
       required
       onChange={handleChange}>
       <option disabled selected>
           Please Select
       </option>
       {/* 遍历分组后的分类与对应选项 */}
       {Object.entries(groupedPeriods).map(([category, items]) => (
           <optgroup key={category} label={category}>
               {items.map(item => (
                   <option
                       key={item.id}
                       value={item.period_name}>
                       {item.period_name}
                   </option>
               ))}
           </optgroup>
       ))}
   </Input>
   

这样处理后，同一个分类只会生成一个optgroup标签，该分类下的所有选项都会被归类到对应的分组中，即可实现你期望的下拉列表显示效果。

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