Проблема с React Hooks, какое правило реагирования я нарушаю?

Question

Я получаю эту ошибку:

Недопустимый вызов ловушки. Хуки можно вызывать только внутри тела функционального компонента.

Я использую хук, чтобы захватить местоположение маршрутизатора с помощью функции HeaderView() (которая сама по себе работает нормально) и устанавливаю состояние так, чтобы Я могу поиграть с моими компонентами на основе текущего маршрута.

Вот композиция моего хука:

const Navbar = () => {
  const [route, setRoute] = useState("/");


  function HeaderView() {
    let location = useLocation();
    console.log(location.pathname);
    setRoute(location.pathname);
    return;
  }

  useEffect(() => {
   HeaderView()
  }, [route]);

.. rest of the component.

useLocation - это функция, предоставляемая "response-router-dom"; Каждый раз, когда я думаю, что у меня есть ручка на крючках, кажется, что-то другое, что сбивает меня с толку, так разочарование, спасибо за чтение.

Answer 1

Я думаю, что вы видите эту ошибку, потому что вы вызываете хук внутри useEffect.

Do not call Hooks inside functions passed to useMemo, useReducer, or useEffect.

источник: https://reactjs.org/warnings/invalid-hook-call-warning.html

Answer 2

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

https://reactjs.org/docs/hooks-rules.html

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

https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/

Answer 3

Что произойдет, если вы развернете HeaderView?

const Navbar = () => {
const [route, setRoute] = useState("/");
let location = useLocation();

useEffect(() => {
    console.log(location.pathname);
    setRoute(location.pathname);
}, [location]);

.. rest of the component.

Звонки только на верхнем уровне

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

Примечание: Также будьте осторожны с бесконечными циклами в useEffect.