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

Question

考虑以下带有故意添加的重复键的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 警告：遇到两个具有相同 key 的子元素row1。Key 应该是唯一的，这样组件在更新时可以保持其身份不变。非唯一的 keys 可能会导致子元素重复或被省略 - 这种行为不受支持，将来版本可能会更改。

现在想象一下，如果我收到这个错误并且不知道关键值，并想要在 Devtools 中检查它们。

通常的 Chrome Devtools 中的 查看元素 不会显示关键值：

而 React Devtools 也不会显示关键值、甚至完全不会显示 <table> 和 <tr>：

我做错了什么？如何在 Devtools 中查看关键值？

- stefan.at.wpf

---

我可以在React开发工具中看到这个键，无论它是唯一的还是重复的。 - Nisharg Shah

文档明确指出：“键（Keys）作为 React 的提示，但它们不会传递给您的组件。如果您需要在组件中使用相同的值，请将其显式地作为具有不同名称的 prop 传递：”https://reactjs.org/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings - jmargolisvt

@NishargShah，你能发一张截图吗？你使用的是官方的React Devtools吗？你在哪里可以看到这个key？ - stefan.at.kotlin

@jmargolisvt 我明白它们没有 props（也许在这里使用 row1 作为 ID 是误导性的），我也不想将它们传递“到” <tr> 中。我只是想知道如何查看哪个元素具有哪个键以进行调试。 - stefan.at.kotlin

Answer 1

通过更改设置解决。在React开发工具中: 组件选项卡 -> 设置符号 -> 组件 -> 移除或禁用过滤器 type等于host（例如<div>）

- stefan.at.wpf