React中Material DataTable基于data的条件渲染实现方法问询

你可以通过以下几种方式实现条件渲染，确保只有data不为null或undefined时才执行Object.entries(data).map逻辑：

方式一：短路求值（最简洁） #

利用&&运算符的特性，只有前面的data为真（非null/undefined）时，才会执行后面的JSX代码，从根源避免无效数据时调用Object.entries：

{data && (
  <TableBody>
    {Object.entries(data).map(x => (
      <TableRow key={x[0]}>
        <TableCell className="tableCell">{x[0]}</TableCell>
        <TableCell className="tableCell">{x[1]}</TableCell>
      </TableRow>
    ))}
  </TableBody>
)}

方式二：额外判断非空对象 #

如果需要避免data是空对象时渲染空表格，可以再加一层长度判断：

{data && Object.keys(data).length > 0 && (
  <TableBody>
    {Object.entries(data).map(x => (
      <TableRow key={x[0]}>
        <TableCell className="tableCell">{x[0]}</TableCell>
        <TableCell className="tableCell">{x[1]}</TableCell>
      </TableRow>
    ))}
  </TableBody>
)}

方式三：三元表达式（支持占位内容） #

如果需要在data无效时显示占位提示，比如“暂无数据”，可以用三元表达式：

{data ? (
  <TableBody>
    {Object.entries(data).map(x => (
      <TableRow key={x[0]}>
        <TableCell className="tableCell">{x[0]}</TableCell>
        <TableCell className="tableCell">{x[1]}</TableCell>
      </TableRow>
    ))}
  </TableBody>
) : (
  <TableBody>
    <TableRow>
      <TableCell colSpan={2} align="center">暂无数据</TableCell>
    </TableRow>
  </TableBody>
)}

关键注意点 #

• 所有方案都确保了Object.entries(data)只会在data有效时执行，避免了TypeError报错；
• 如果你的data有可能是数组类型，需要调整处理逻辑（比如改用data.map），但从原代码来看，这里应该是处理对象类型的数据。

内容的提问来源于stack exchange，提问作者Jack