无法在 React 或 Chrome devtools 中看到键值

问题描述

考虑以下 JSX 有意添加重复键：

<table>
    <tbody>
        <tr key="row1">
            <td>row1_col1</td>
        </tr>
        <tr key="row1">  <--- same key here
            <td>row2_col1</td>
        </tr>
    </tbody>
</table>

正如预期的那样导致

index.js:1 警告：遇到两个具有相同密钥的孩子， row1。键应该是唯一的，以便组件保持它们的 跨更新的身份。非唯一键可能会导致孩子 重复和/或省略 - 行为不受支持并且可能 在未来版本中更改。

现在假设我收到此错误并且不知道键值并想在 Devtools 中检查它们。

Inspect element 在普通 Chrome Devtools 中不会显示密钥：

而且 React Devtools 也不显示密钥/根本不会显示 <table> 和 <tr>：

我做错了什么？如何在 Devtools 中查看密钥？

解决方法

通过更改设置解决。在 React devtools 中：组件选项卡 -> 设置符号 -> 组件 -> 移除或禁用过滤器 type equals host (e.g. <div>)