通过添加&&条件将为您处理空和未定义的检查

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

如果要编写条件运算符

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

 }
</TableBody>

在某个条件下，可以对渲染组件应用两种操作。

1. <expression> && <true>在JS中，一个奇怪的行为是如果<expression>的值为true，则返回第二个表达式<true>。如果您只是不想呈现任何东西如果<expression>的值为false，则可以使用此功能。
2. <expression> ? <true> : <false>如果你想在任何情况下渲染某个东西，这是很有用的。这被称为一个三元运算符，你可以把它看作一个内联的if-else语句，它返回<true>-或<false>表达式，这取决于<expression>的计算结果。
   现在，要检查数据是否有效，JS还有另一个有用的功能：真值/假值. ""（空字符串），0，null，undefined在逻辑表达式中使用时会被强制转换为false值，因此您可以通过将data对象放入<expression>来检查数据是否有效，由于这是一个逻辑值，您可以在<expression>的开头使用!来切换值。
   一些例子：

{!data && <NoDataComponent /> /* Only renders if data is falsy */}
{data && <DataComponent /> /* Only renders if data is there */}

{data ? <DataComponent /> : <NoDataComponent /> /* Renders always one of the components but never both at the same time! */}

只需验证数据是否存在

{
 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>
: <h3>No hay data</h3>
}