reactjs - 在 Material UI Select 组件中根据数据动态生成分组

Question

我需要动态生成 Select 组件的分组，并希望以受控方式使用该组件。 (与不受控制的情况相反。)
此代码片段在没有 <ListSubheader ...> 的情况下工作正常组件，但是我需要它和 Material UI Docs example for group select显示使用 <ListSubheader ...>组件以这种方式。

  <Select fullWidth value={selectedPlan} onChange={handleChange}>
        {products?.map(p => (
          <>
            <ListSubheader>{p.name}</ListSubheader>
            {p.plans.map(pl => (
              <MenuItem key={pl.id} value={pl}>
                {pl.id} {pl.name} {pl.type} {pl.price}
              </MenuItem>
            ))}
          </>
        ))}
      </Select>

但是，如果我们收到错误消息，似乎不可能动态生成它

The Menu component doesn't accept a Fragment as a child. Consider providing an array instead.

根据 Material UI documentation ,

⚠️The MenuItem elements must be direct descendants when native is false.

如何在我的组件中以编程方式生成我的分组。
我创建了一个 code sandbox这个问题是可重现的

Answer 1

这是edited沙箱。
是的，问题是你把它包裹在一个片段中。如果你用 <div> 包裹它它有效但返回 undefined为 event.target.value自 <MenuItem/>不是 <Select/> 的直系 child .
附注我把它提取到一个函数中，只是让它更清楚。它与修复无关。