如何解決類型“void”不可分配給 TSX 中的類型“ReactNode”問題

Question

我正在嘗試使用forEach循環來迭代 Mui 組件MenuItem ，但我得到Type 'void' is not assignable to type '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返回無效。 要在 JSX 中顯示項目列表，請使用數組的map方法，該方法會將數組中的項目轉換為其他形式。 例如：

const squares = (
  <ul>
    {[1, 2, 3, 4].map((value) => (
      <li key={value}>{value}</li>
    ))}
  </ul>
);

在此處了解有關反應列表的更多信息

對於您的情況，您可以執行以下操作：

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