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

标签 reactjs react-hooks

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

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

const [doughnuts, setDoughnuts] = useState(24)

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

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

最佳答案

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

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

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

enter image description here

enter image description here .

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

enter image description here

关于reactjs - 使用 'fields' 钩子(Hook)时,有没有办法通过 React DevTools 在 React 多重状态下查看 'useState' 的名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57659640/

相关文章:

html - 如何在 css 中获得 5 x 5 的网格?

reactjs - React 中的状态逻辑和状态有什么区别?

javascript - 如何将参数传递给 usePromise React hook 内的 Promise

reactjs - 在 onClick 函数内调用更新函数时 useState 不会重新渲染

reactjs - 用柏树在窗口上设置一个属性

javascript - 如何在两个不同的组件中使用路由 - ReactJS

javascript - React hook useState() 的行为真的很奇怪

reactjs - 在 React 中,将共享状态注入(inject)不具有父子关系的组件的正确方法是什么?

reactjs - 我可以在 useEffect 的依赖数组中使用动态属性吗?

javascript - 设置 useState 对象值时使用 prop value