Reactjs 在材质UI中生成分组从数据动态选择组件

我需要动态地生成Select组件的分组，并希望以可控的方式使用该组件。（与不受控制的情况相反。）

这个代码片段在没有

组件的情况下可以正常工作，但是我需要它，并且以这种方式使用

组件进行演示

  <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>

{products？.map（p=>(
{p.name}
{p.plans.map（pl=>(
{pl.id}{pl.name}{pl.type}{pl.price}
))}
))}

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

菜单组件不接受片段作为子项。考虑提供一个数组代替.< /P> 据报道,

⚠️当native为false时，MenuItem元素必须是直接后代

如何以编程方式在组件中生成分组

我已经创建了一个可以重现此问题的沙盒

是的，问题是你把它包装成了碎片。如果将其包装在

中，它会工作，但会返回

事件.target.value的
未定义的
，因为
不是
的直接子级

顺便说一句，我把它提取成一个函数，只是让它更清楚。这与修复无关