无法在 React 或 Chrome 开发工具中查看键值

Question

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

\n

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

\n

正如预期的那样，这会导致

\n

\n

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

\n

\n

现在想象一下我收到此错误并且不知道键值并想在开发工具中检查它们。

\n

Inspect element在正常的 Chrome Devtools 中不会显示密钥：

\n

\n

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

\n

\n

我究竟做错了什么？如何查看Devtools中的按键？

\n

Answer 1

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