reactjs - 使用 'fields' 钩子(Hook)时，有没有办法通过 React DevTools 在 React 多重状态下查看 'useState' 的名称

Question

我一直在学习/实验 React hooks。当我使用 Chrome 中的 React DevTools 检查组件当前状态的值时，我看到状态很好，但实际的“字段”——即由各个 更新的状态变量useState 钩子(Hook)——没有任何与其关联的名称。相反，我看到，例如，几个字符串、几个 bool 值等。我通常可以弄清楚发生了什么，但这似乎有问题 - 我希望能够看到哪个状态变量的名称是什么。

例如，如果我有类似的东西

const [doughnuts, setDoughnuts] = useState(24)

当我查看 React DevTools 时，我希望看到类似“doughnuts: number : 24”的内容，而不仅仅是“number: 24”。

我是否缺少某处的某些设置，或者某种开启此功能的技巧？

Answer 1

react 团队终于听取了我们的意见

最近在 React 开发工具选项中引入解析自定义 Hook 可能会有所帮助
.

解析之前(单击自定义 Hook 卡中的魔术按钮之前)

。 .

解析后(点击右上角魔术按钮)