如何使用 React Dev Tools 在状态树中找到钩子的状态？

Question

在这个 React 页面上，我们有许多钩子和许多上下文提供者。 我关心的钩子之一：

const { branchDetails, branchLoadError } = useBranchValidator();

在其中有一些状态以及几个useEffect s：

  const [branchId, setBranchId] = useState(queryParams.branchId ?? '');

我想用 React Dev Tools 查看branchId值。 我开始假设这个钩子的状态将在最近的上下文提供者中（下图），但它不在那里。

是否可以使用开发工具查看 React 挂钩中的状态？

Answer 1

在 React Devtools 侧边栏中，使用中的钩子默认显示在props下方的不同部分中。

在 React DevTools 中，它们不会与分配的变量名称一起显示，但通常可以从上下文中推断出它们的状态值。 根据React Dev Tools 不显示 Component Names 或 State Variable Names ，单击hooks部分右上角的魔术棒图标可以显示此信息，但它可能会占用资源并导致在复杂组件上使用时超时根据我的个人经验，就像上下文提供者一样。