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

Question

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

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

const [doughnuts, setDoughnuts] = useState(24)

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

我是否缺少某个地方的设置或某种技巧来启用此功能？

Answer 1

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

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

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

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

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

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

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