我一直在学习/试验 React 钩子。当我在 Chrome 中使用 React DevTools 检查组件当前状态的值时，我看到状态很好，但实际的“字段”——即由各个useState钩子更新的状态变量——没有与它们相关的任何名称。相反，我看到的，例如，几个字符串，一对夫妇布尔值，等等。我一般都弄清楚是怎么回事，但是这似乎有问题-我希望能够看到其状态变量的名字是什么。
例如，如果我有类似的东西
const [doughnuts, setDoughnuts] = useState(24)
当我查看 React DevTools 时，我希望看到类似“doughnuts: number : 24”的内容，而不仅仅是“number: 24”。
我是不是在某处遗漏了一些设置，或者一些开启此功能的技巧？
其他答案中未提及的一些方法：
1）使用以下内容：（由Oleh建议）
const [{ item }, setItem] = useState({ item: 2 });
您还可以包装useState函数，以便根据初始值的形状，setItem它返回的函数会从传递的值本身自动转换为具有正确（包装器）形状的对象。
2）新建一个useStateWithLabel函数：
function useStateWithLabel(initialValue, name) {
const [value, setValue] = useState(initialValue);
useDebugValue(`${name}: ${value}`);
return [value, setValue];
}
它基于此处描述的useDebugValue功能。
用法：
const [item, setItem] = useStateWithLabel(2, "item");
最近在react开发工具选项中引入解析自定义钩子可能会有所帮助
。
.
.
你没有遗漏任何东西，你不能改变这种行为。这就是 React 处理多个状态的方式。
https://reactjs.org/docs/hooks-rules.html#explanation。
避免此问题的一种方法是使用单个 State Hook，它创建包含所有数据的单个状态。
const [state, setState] = useState({doughnuts: 24, key1: 'value1', key2: 'value2'});
在这种情况下，状态存储在单个对象中，每个值都与一个键相关联。
看看这个：我应该使用一个还是多个状态变量？
复合状态很难管理，但有一个工具可以帮助您：useReducer Hook
当您进行以下操作时
const [item, setItem] = useSate(2)
您正在使用destructuring assignment在array其中不包含一个类型key像object。您只是创建一个alias来访问由 返回的数组的第一个元素useState。如果你做这样的事情
const [item, setItem] = useState({value: 2})
您将能够value: 2在您的开发工具中看到，因为它反映了某个时间点该钩子的当前状态。
每次调用 Hook 时，它都会根据前一个值在当前正在执行的组件中获取隔离的本地状态，因此由您 ( item)赋予的标识符将仅适用于该渲染周期，但这并不意味着该React引用正在使用相同的标识符。