使用'useState'钩子时，有什么方法可以使用React DevTools查看React多状态中的'fields'名称

Question

我一直在使用React钩子进行学习/实验。当我去使用Chrome中的React DevTools检查组件当前状态的值时，我看到状态很好，但是实际的“字段”-即由各个{{1 }}钩子-没有任何关联的名称。相反，例如，我看到了几个字符串，几个布尔值等。我通常可以弄清楚发生了什么，但这似乎有问题-我希望能够看到哪个状态变量的名称是什么。

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

useState

当我查看React DevTools时，我想看到的是类似“甜甜圈：数字：24”，而不仅仅是“数字：24”。

我在某处缺少某些设置吗，或者缺少某种技术来启用此功能？

Answer 1

执行以下操作时

const [item, setItem] = useSate(2)

您在destructuring assignment中使用array，而该类型不包含key之类的object。您只是创建一个alias来访问useState返回的数组的第一个元素。如果你做这样的事情

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

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

每次调用Hook时，它都会根据先前的值在当​​前正在执行的组件内获取孤立的局部状态，因此，您赋予的标识符（item）仅限于该渲染周期，但是它并不意味着React引用正在使用相同的标识符。

Answer 2

您不会丢失任何东西，并且无法更改此行为。这就是React处理多个状态的方式。

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

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

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

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

看看这个：Should I use one or many state variables?

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

Answer 3

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

1）使用以下命令：（suggested by Oleh）

useState

您还可以包装setItem函数，以便根据初始值的形状，useStateWithLabel函数将传递的值本身自动转换为具有正确的（包装纸）形状。

2）创建一个新的function useStateWithLabel(initialValue, name) { const [value, setValue] = useState(initialValue); useDebugValue(`${name}: ${value}`); return [value, setValue]; } 函数：

useDebugValue

它基于const [item, setItem] = useStateWithLabel(2, "item"); 函数described here。

用法：

const initialState = {
    canSwipe: true
};

Answer 4

您可以使用 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 建议的方法）

Answer 5

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

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

解析前（点击自定义钩子卡中的魔术按钮前）

。 .

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