我们可以在 reactjs 钩子中对 useState() 使用对象解构吗？

Question

根据 Reactjs 中 Hooks 的文档，

const [count, setCount] = useState(0);

他们使用数组解构。我们可以使用对象解构代替数组解构吗？

Answer 1

useState return是一个数组，所以不行，在这种情况下，你必须使用数组解构。

澄清一下，这并不意味着所有 React 钩子函数都需要 return 一个数组。

如果你create your own hook，你可以return任何你喜欢的东西，包括一个你可以解构的对象。

Answer 2

我完全同意@Patrick 的回答。自 React 团队实施以来，它遵守所有用例。实际上不需要将 return 值放入对象中，因为它不需要通过键访问它或稍后需要更新。这里的一个优势是解构对于数组来说，这部分比对象更容易。

正如我们所见const [count, setCount] = useState(0);，我们可以为计数和设置计数使用任何名称。在对象中，我们需要这样做：

// grab the state value and setState func but rename them to count and setCount
   const { stateValue: count, setState: setCount } = useState(0);

在数组中：

// grab in order and rename at the same time
   const [count, setCount] = useState(0);

Answer 3

你不应该 useState，但是...

正如@SakhiMansoor 提到的，在 setState 的情况下解构数组时命名变量变得容易，因为它是通用挂钩，您可以将它用于不同的数据，例如：

const [count, setCount] = useState(0);
const [age, setAge] = useState(0);
...

但是在创建自定义挂钩时，我通常更喜欢对象。让我们考虑一个例子：

// If return an array
const [items, addItem, removeItem] = useItems();

// and only need `removeItem`, I write (I could easily forget one `,` here):
const [, , removeItem] = useItems();

// if I returned object, I would:
const { removeItem } = useItems();

在编写自定义的特定挂钩时，我通常不需要重命名键，因此对象在这种情况下效果更好。

Answer 4

setDetails(prev => { return{ ...上一个， [e.target.name]:e.target.value } });

最好的方法之一。

我们可以在 reactjs 钩子中对 useState() 使用对象解构吗？

Can we use object destructuring for useState() in reactjs hooks?

javascript

reactjs

react-hooks