为什么我不再使用 console.log() 来检查 React 状态更新

控制台.table()

作为一名前端开发者，我的调试工具库中最重要的工具之一就是控制台日志。它能够记录数据并检查其在浏览器中是否按预期呈现，让你能够快速、简洁地调试代码的特定部分。

我在 React 中工作，能够控制台记录您的状态并检查组件是否按预期呈现是一种关键的开发模式。

当你的状态很简单并且你只有一个或两个值需要监视时，console.log()很棒，但是当你开始向组件状态添加更多内容时，特别是在 Class 组件中，这会变得非常难看，因为输出的状态对象被最小化了。

控制台.table()

Console.table 是一种很好的登录到控制台的方式，它将解析您的数据并以表格的形式登录到控制台。

使用 Chrome 开发工具中的控制台，我们可以看到 console.table() 正在工作

函数 console.table() 接受一个数组或一个对象，也可以接受一个可选参数“columns”

第一列将被标记为索引，如果是数组，它将显示索引，而对象将显示键或属性名称。

该表也按您期望的方式工作，允许您通过单击标题对列进行排序。

请注意，在 Firefox 中，console.table() 目前限制为 1000 行

列
真正有用的是 columns 参数。
默认情况下，columns.table() 会列出对象中的所有元素。columns 参数接受一个包含列名或值的数组，并允许您选择想要显示的值。通过使用它，您可以解析一个大型对象数组，并仅选择与您相关的列。

记录你的状态！
回到 React，一种常见的模式是将服务器响应存储在你的状态中，其中通常包含一些你正在处理的组件中不会用到的数据。
使用 columns 参数，你可以在控制台中仅显示你实际正在观察的数据列。

让我们看看它是什么样子。
在下面的例子中，我们的 api 调用返回一个包含用户的 json 文件，并将其存储在 state 中。
在渲染中使用 console.table(users)，我们将能够生成下表并检查数据是否符合预期，而无需在 UI 中构建表格组件。

现在，如果我们想构建一个快速过滤按钮来检查哪些客户使用人民币付款，我们可以执行以下操作

const onlyYuanUsers = users.filter( user => user.currency === "Yuan Renminbi")
console.table(onlyYuanUsers)

这将生成一个过滤表来检查它是否返回您需要的值。

但这些数据比您检查过滤器是否正常工作所需显示的数据要多。

通过传入 columns 参数，您可以通过定义列名数组来选择要选择的列。

输出将是一个更紧凑的表格，可以进行“一目了然”的比较。

console.table(onlyYuanUsers, ['id', 'currency'])

值得注意的是，截至发布时，除 IE 外，所有现代浏览器都支持 console.table()（我确实说了现代）