Chrome 开发工具显示所有名为“State”的 useState 挂钩

Question

我正在尝试在开发工具中检查 React Hooks 组件，但无论组件如何，我的所有 useState 挂钩都显示为：

Hooks

State: false
State: null
Effect: fn()

这些false值是正确的，但我无法弄清楚哪个钩子是哪个，因为由于某种原因它们不会显示钩子变量名称。

以下是我设置每个钩子的方法：

const [myHook, setMyHook] = useState(false);

Answer 1

请参阅使用“useState”挂钩时，是否有任何方法可以使用 React DevTools 查看 React 多状态中“字段”的名称：

const [item, setItem] = useStateWithLabel(2, "item");

function useStateWithLabel(initialValue, name) {
  const [value, setValue] = useState(initialValue);
  useDebugValue(`${name}: ${value}`);
  return [value, setValue]; 
}