选择组件MUI不接受Fragment作为子组件.考虑提供一个数组

Question

我有几个控制台错误，因为这个react函数组件，给出这个错误:

选择组件MUI不接受Fragment作为子组件。考虑提供数组代替

function CustomSelectGrouping({ reportList, label }) {
return (
<FormControl sx={{ width: '100%' }}>
<InputLabel htmlFor="grouped-select">{label}</InputLabel>
<Select defaultValue="" id="grouped-select" label="Grouping">
{Object.keys(reportList).map((head) => (
<>
<ListSubheader>{head}</ListSubheader>
{reportList[head].map(({ id, name }) => <MenuItem value={id}>{`${id} - ${name}`}</MenuItem>)}
</>
))}
</Select>
</FormControl>
);
}

我已经尝试过使用React。片段和渲染()，但他们都没有工作。什么好主意吗?

Answer 1

按照标准库的建议将其转换为数组。它看起来应该像这样

Object.keys(reportList).map((head) => [
<ListSubheader>{head}</ListSubheader>,
...reportList[head].map(({ id, name }) => <MenuItem value={id}>{`${id} - ${name}`}</MenuItem>),
])