我正在尝试使用 forEach 循环来迭代 Mui 组件 MenuItem,但我得到类型“void”无法分配给类型“ReactNode” 错误。 这是我的代码片段-
<TableCell>
<Typography>expiry</Typography>
<Select variant="outlined" sx={{ width: '100%', height: 35, borderRadius: 2 }}>
{ groupData.forEach((option) => (
<MenuItem key={option.expiry} value={option.expiry}>
{option.expiry}
</MenuItem>
))}
</Select>
</TableCell>
提前致谢
最佳答案
forEach
返回 void。要在 JSX 中显示项目列表,您可以使用数组的 map
方法,该方法会将数组的项目转换为其他形式。例如:
const squares = (
<ul>
{[1, 2, 3, 4].map((value) => (
<li key={value}>{value}</li>
))}
</ul>
);
Learn more about lists in react here
根据您的情况,您可以执行以下操作:
<TableCell>
<Typography>expiry</Typography>
<Select variant="outlined" sx={{ width: '100%', height: 35, borderRadius: 2 }}>
{groupData.map((option) => (
<MenuItem key={option.expiry} value={option.expiry}>
{option.expiry}
</MenuItem>
))}
</Select>
</TableCell>
关于javascript - 如何解决 TSX 中的类型 'void' 无法分配给类型 'ReactNode' 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70857627/