Chrome Dev Tools 显示所有名为“State”的 useState 钩子

Question

I am trying to inspect a React Hooks component in Dev Tools but regardless of component all my useState hooks show up as

Hooks

State: false
State: null
Effect: fn()

The false values are correct but I can't figure out which hook is which since for some reason they won't display the hook variable name.

Here is how I setup each hook:

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

Answer 1

see https://stackoverflow.com/a/58579953/1930509

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

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