使用“useState”挂钩时，有什么方法可以使用 React DevTools 查看 React 多状态中的“字段”名称

Question

我一直在学习/试验 React 钩子。当我在 Chrome 中使用 React DevTools 检查组件当前状态的值时，我看到状态很好，但实际的“字段”——即由各个useState钩子更新的状态变量——没有与它们相关的任何名称。相反，我看到的，例如，几个字符串，一对夫妇布尔值，等等。我一般都弄清楚是怎么回事，但是这似乎有问题-我希望能够看到其状态变量的名字是什么。

例如，如果我有类似的东西

const [doughnuts, setDoughnuts] = useState(24)

当我查看 React DevTools 时，我希望看到类似“doughnuts: number : 24”的内容，而不仅仅是“number: 24”。

我是否错过了某处的一些设置，或者一些开启此功能的技巧？

Answer 1

最后反应团队听取了我们的意见

最近在 React 开发工具选项中引入解析自定义钩子可能会有所帮助
。

解析之前（单击自定义挂钩卡中的魔术按钮之前）

。 。

解析后（点击右上角魔术按钮）

Answer 2

其他答案中未提及的一些方法：

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");

Answer 3

你没有遗漏任何东西，你不能改变这种行为。这就是 React 处理多个状态的方式。

https://reactjs.org/docs/hooks-rules.html#explanation。

避免此问题的一种方法是使用单个 State Hook，它创建包含所有数据的单个状态。

const [state, setState] = useState({doughnuts: 24, key1: 'value1', key2: 'value2'});

在这种情况下，状态存储在单个对象中，每个值都与一个键相关联。

看看这个：我应该使用一个还是多个状态变量？

复合状态很难管理，但有一个工具可以帮助您：useReducer Hook

Answer 4

当您执行以下操作时

const [item, setItem] = useSate(2)

您正在使用不包含 a 的 a 类型，destructuring assignment例如an 。您只需创建一个来访问 所返回的数组的第一个元素。如果你做这样的事情arraykeyobjectaliasuseState

const [item, setItem] = useState({value: 2})

您将能够value: 2在开发工具中看到，因为它反映了该钩子在某个时间点的当前状态。

每次调用 Hook 时，它都会根据先前的值在当​​前正在执行的组件中获取隔离的本地状态，因此由您 ( item) 赋予的标识符将仅作用于该渲染周期，但这并不意味着React引用正在使用相同的标识符。

Answer 5

您可以使用use-named-stateuseDebugState包中的钩子。

import { useDebugState } from "use-named-state";
const App = () => {
  const [counter, setCounter] = useDebugState("counter", 0);

  return <button onClick={(prevCount) => prevCount + 1}>{counter}</button>;
};

它内部使用useDebugValue来自react的钩子（@Venryx建议的方法）