Можем ли мы использовать деструктуризацию объекта для useState() в перехватчиках реагирования?

Question

Что касается документации от Hooks в Reactjs,

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

они используют деструктуризацию массива. Можем ли мы использовать деструктуризацию объекта вместо деструктурирования массива?

Answer 1

Я полностью согласен с ответом @Patrick. Поскольку реагирующая команда реализовала его, придерживайтесь всех вариантов использования. На самом деле нет необходимости помещать возвращаемые значения в объект, так как он не нуждается в доступе к нему через ключи или позже должен обновляться. Одним из преимуществ здесь является то, что Деструктурируемая часть легче для массивов, чем объекты.

Как мы видели const [count, setCount] = useState(0); мы можем использовать любое имя для count и setCount. В объектах нам нужно сделать это так:

// 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 2

useState возвращает массив, так что нет, в этом случае вы должны использовать деструктуризацию массива.

Для пояснения, это не означает, что все функции ловушки React должны возвращать массив.

Если вы создадите свой собственный хук, вы можете заставить его возвращать все, что вам нравится, включая объект, который вы можете разрушить.

Answer 3

setDetails(prev => {return {...prev,[e.target.name]:e.target.value}});

один из лучших способов.

Answer 4

You should not for useState, but...

As @SakhiMansoor mentioned, naming variables become easy when destructuring array in case of setState, because it's generic hook and you can use it for different data, eg:

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

But when creating custom hooks I usually prefer objects. Let's consider an example:

// 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();

When writing custom, specific hooks, I usually don't need to rename keys, so object works better in this case.