Reactjs 在DevTools中为React state指定名称

在使用React-useState（）时，如果您有类似以下内容的

const[cartItems，setCartItems]=useState（[]）

它在React开发工具中显示为

状态：[]

。除了将状态从数组更改为包含数组的对象，例如

useState（{cartItems:[]}）

我还可以做些什么来显示状态的键？如果不是，这是使用对象的坏习惯还是我可以使用它？我想要一个键的原因是，在调试时，如果你有许多不同的状态项，DevTools只会显示为

state:[]、state:{[…]}、state:[]

等等，这很难看出什么是什么。

不太可能，因为

useState

钩子使用数组解构来分配变量名，也就是说，名称仅在函数中使用，而不是在react框架中使用

const [someSpecialAwesomestate, setSomeSpecialAwesomestate] = useState();

等同于

const stateObject = useState();
// stateObject[0] is the state
// stateObject[1] is the callback state mutator function

据我所知，React通过简单地将钩子本身存储在一个数组中来进一步混淆这一点

---

用一个根键存储对象可能会有点冗长，管理状态更新也会有点乏味，但是如果它能帮助开发人员了解devtool中每个状态对象是什么，那么为什么不做一些有助于编写更好的代码的事呢？

我想你做不到。