React Material Table事件日志无法正确显示布尔值如何解决

问题原因 #

你的布尔值判断逻辑存在硬编码错误，&&运算符右侧直接写死了布尔字面量，完全没有读取row[column]的实际值：

• 第一个判断分支typeof row[column] === 'boolean' && false：后半段固定为false，该分支永远不会触发
• 第二个判断分支typeof row[column] === 'boolean' && true：只要值是布尔类型，后半段就固定为true，所有布尔值都会走到这个分支返回True，自然无法区分实际的真假值

修复方案 #

调整布尔值的判断逻辑，直接读取字段的实际值做分支判断即可，修正后的代码如下：

<TableContainer component={Paper}>
    <Table>
      <TableHead>
        <StyledTableRow>
          {data[0] &&
            columns.map((heading) => <TableCell>{heading}</TableCell>)}
        </StyledTableRow>
      </TableHead>
      <TableBody>
        {data.map((row) => (
          <TableRow>
            {columns.map((column) => (
              <TableCell>
                {typeof row[column] === 'boolean'
                  ? row[column] ? 'True' : 'False'
                  : row[column]}
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>

如果需要更简洁的写法，也可以直接对布尔值做字符串转换后首字母大写：

<TableCell>
  {typeof row[column] === 'boolean'
    ? row[column].toString().replace(/^\w/, c => c.toUpperCase())
    : row[column]}
</TableCell>

内容的提问来源于stack exchange，提问作者Peter M.