React 开发工具不显示组件名称或 State 变量名称

Question

This is a screenshot of the new React Dev Tools in Google Chrome:

Only the top level component name AdminArea shows. This component is in my script's entry file, index.jsx . There should also be AddNewCoupon and ViewCoupons components. No filters are enabled.

Notice also the state hook naming inside the component only says "State". These are booth useState() hooks.

The useReducer's initial state variable names can be seen, but only because I'm directly exporting and importing that variable into the entry file index.jsx .

Anyone know how to fix these labelling issues?

Answer 1

Actually there's no current solution to this problem I was going to open a Github issue about this but it turned out that Bryan Vaughn opened the issue himself:). Here is the reference to Github issue . Cheers, sigfried.

Update

Now it's possible to show the names within the DevTools, click the magic wand in the top right corner:

And that will become: