reactjs - Chrome 开发工具显示名称为 'State' 的所有 useState Hook

Question

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

Hooks

State: false
State: null
Effect: fn()

false 值是正确的，但我无法确定哪个钩子(Hook)是哪个钩子(Hook)，因为由于某种原因它们不会显示钩子(Hook)变量名称。

以下是我设置每个钩子(Hook)的方法:

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

Answer 1

参见 Is there any way to see names of 'fields' in React multiple state with React DevTools when using 'useState' hooks :

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

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