javascript - 如何解决 TSX 中的类型 'void' 无法分配给类型 'ReactNode' 问题

Question

我正在尝试使用 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>

提前致谢

Answer 1

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>