Предупреждение при использовании реакционных хуков в HoC - PullRequest
Новая
       27

Предупреждение при использовании реакционных хуков в HoC

1 голос
/ 24 мая 2019

Я создал компонент более высокого порядка, который должен добавить некоторые дополнительные функции моим компонентам.Однако, когда я использую перехватчики реагирования в этом компоненте, я получаю следующее предупреждение eslint:

React Hook "React.useEffect" не может быть вызван внутри обратного вызова.React Hooks должны вызываться в компоненте функции React или в пользовательской функции React Hooks.(ответные зацепки / правила зацепки)

Почему я получаю это предупреждение?Считается ли плохой практикой использование хуков в HoC?

Минимальный пример: 

const Hello = props => <p>Greetings {props.name}</p>;

const Wrapper = Component => props => {
  React.useEffect(() => {
    // Do something here
  }, []);
  return <Component {...props} />;
};

export default Wrapper(Hello)

codesandbox: https://codesandbox.io/s/proud-tree-5kscc

1 Ответ

3 голосов
/ 24 мая 2019

Официальная документация React Hooks гласит:

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

✅ Вызывает хуки из компонентов функции React.

✅ Вызовите Hooks из пользовательских Hooks.

Как сказал @AsafAviv, вы должны преобразовать свой HOC в пользовательский хук, чтобы избежать нарушения Правил хуков .

Причина описана в FAQ кстати:

Как React связывает вызовы Hook с компонентами?

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

Существует внутренний список «ячеек памяти», связанных с каждым компонентом. Это просто объекты JavaScript, в которые мы можем поместить некоторые данные. Когда вы вызываете Hook, например, useState (), он читает текущую ячейку (или инициализирует ее во время первого рендеринга), а затем перемещает указатель на следующий. Вот как каждый из нескольких вызовов useState () получает независимое локальное состояние.

...