Используя пользовательский хук в функции обработчика событий?

Question

Я новичок в использовании React Hooks (хотя я уже некоторое время использую React), и я пытаюсь использовать пользовательский хук в моем обработчике событий.

Однако я получаю это ошибка:

React Hook "useMyCustomHook" is called in function "onSubmit" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Вот мой код:

import MyCustomHook from './myCustomHook';


const MyComponent= () => {
  const onSubmit = (e) => {
    e.preventDefault();

    const someData = {
      // data
    };
    useMyCustomHook(someData);
  };

  return (
      <form onSubmit={onSubmit}>
        <div className="form-control">
          // some form content
        </div>
      </form>
  )
}

Что я здесь не так делаю?

Answer 1

Из правил правил перехвата говорится:

Не вызывать перехватчики из обычных функций JavaScript. Вместо этого вы можете:

• ✅ Вызывать хуки из компонентов функции React.
• ✅ Вызывать хуки из пользовательских хуков (мы узнаем о них на следующей странице).

Это то, что вы делаете неправильно.

Answer 2

React встроенные хуки или пользовательские хуки не должны использоваться внутри обратного вызова. Это одно из правил хуков. Пожалуйста, прочитайте больше об этом здесь .