我一直在学习/试验 React 钩子。当我在 Chrome 中使用 React DevTools 检查组件当前状态的值时，我看到状态很好，但实际的“字段”——即由个人 useState 更新的状态变量钩子——没有任何名称与它们相关联。相反，我看到了例如几个字符串、几个布尔值等。我通常可以弄清楚发生了什么，但这似乎有问题——我希望能够看到 which状态变量的名称是什么。
例如，如果我有类似的东西
const [doughnuts, setDoughnuts] = useState(24)
当我查看 React DevTools 时，我希望看到类似 `doughnuts: number : 24' 的内容，而不仅仅是 'number: 24'。
我是否遗漏了某处的某些设置，或者某些打开此功能的技巧？
【问题讨论】：
标签： reactjs react-hooks
当你进行以下操作时
const [item, setItem] = useSate(2)
您在array 中使用了destructuring assignment，该类型不包含key，如object。您只是创建了一个alias 来访问useState 返回的数组的第一个元素。如果你做这样的事情
const [item, setItem] = useState({value: 2})
您将能够在您的开发工具中看到value: 2，因为它反映了该挂钩在某个时间点的当前状态。
每次调用 Hook 时，它都会根据之前的值在当前正在执行的组件中获取隔离的本地状态，因此您所赋予的标识符 (item) 将仅适用于该渲染周期，但它不会t 表示 React 引用使用相同的标识符。
【讨论】：
const [{ item }, setItem] = useState({ item: 2 }); 来避免出现额外的名称，开发工具会有一些东西向我们展示
useState 函数，以便根据初始值的形状，setItem 函数返回从值本身自动转换为具有正确（包装器）形状的对象。
你没有遗漏任何东西，你也无法改变这种行为。这就是 React 处理多个状态的方式。
https://reactjs.org/docs/hooks-rules.html#explanation.
避免此问题的一种方法是使用单个 State Hook，它创建一个包含所有数据的单个状态。
const [state, setState] = useState({doughnuts: 24, key1: 'value1', key2: 'value2'});
在这种情况下，状态存储在单个对象中，每个值都与一个键相关联。
看看这个：Should I use one or many state variables?
复合状态很难管理，但有一个工具可以帮助您：useReducer Hook
【讨论】：
useState() 来处理复杂的对象状态，而是使用useReducer() 可以节省您的时间，避免不必要的麻烦。
其他答案中未提及的一些方法：
1) 使用以下内容：(suggested by 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函数described here。
用法：
const [item, setItem] = useStateWithLabel(2, "item");
【讨论】：
useDebugValue(name + ":" + JSON.stringify(value));
您可以使用 use-named-state 包中的 useDebugState 钩子。
import { useDebugState } from "use-named-state";
const App = () => {
const [counter, setCounter] = useDebugState("counter", 0);
return <button onClick={(prevCount) => prevCount + 1}>{counter}</button>;
};
它在内部使用来自 react 的 useDebugValue 钩子（@Venryx 建议的方法）
【讨论】：