Как создать имя динамической функции для useState?

Я пытаюсь добавить useState хуков из массива имен, но это не работает так, как я думал. Кто-нибудь знает, как я могу этого добиться?

let f = {
    get: { },
    set: { }
};

for (let field of fields) {
    const [f.get[field], f.set[field]] = useState(menu[field]);
}

и я получаю сообщение об ошибке:

imports/ui/admin/Menu.jsx:128:10: /home/csi/csi/imports/ui/admin/Menu.jsx: Unexpected token, expected "," (128:10)

  126 |     };
  127 |     for (let field of fields) {
> 128 |         const [f.get[field], f.set[field]] = useState(menu[field]);
      |                 ^
  129 |     }
  130 | 
  131 |     const submit = e => {

Заранее спасибо!


reactjs react-hooks use-state
person DaMaGeX    schedule 21.02.2021    source источник
comment
Вы не можете объявлять поля объекта с помощью const, вы можете сделать это const [temp1, temp2]= useState(menu[field]);f.get[field]=temp1;f.set[field]=temp2; Однако я бы рекомендовал вам пересмотреть свой подход и сохранить массив значений в одной переменной состояния.   -  person Nadia Chibrikova    schedule 21.02.2021

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать useState внутри циклов только в том случае, если вы гарантируете, что хуки вызываются в одном и том же порядке каждый раз при рендеринге компонента. Это то, что позволяет React правильно сохранять состояние хуков между несколькими вызовами useState и useEffect.

См. Этот ответ для лучшего разъяснения. Узнать здесь

person Badal Sherpa    schedule 21.02.2021

arrow_upward
-1
arrow_downward

Во-первых, перехватчики React НЕ СЛЕДУЕТ использовать в условных операторах и циклах, поскольку они зависят от единообразного и детерминированного порядка вызовов. Ознакомьтесь с правилами хуков, чтобы получить больше информации по этой теме.

Кроме того, useState(menu[field]) возвращает переменную состояния и функцию установки. Ваш код явно не работает, потому что он синтаксически неверен. Вы можете использовать имена динамических переменных, сохранив все состояние в одном объекте:

const [state, setState] = useState({property: value});

const alterState = (property, value) => {
    setState(state => {...state, [property]: value});
}

или используя reducer.

person zhulien    schedule 21.02.2021