Блог

Главная - Вопросы по программированию - Как мне удалить прослушиватели событий при переключении маршрута в react?

Как мне удалить прослушиватели событий при переключении маршрута в react?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Есть ли способ удалить прослушиватели событий при переключении маршрута в react? Мой коммутатор маршрутизаторов выглядит так:

 <Switch>
            <Route exact path="/" render={() => <Menu setLang={setLang} />}></Route>
            <Route path="/gallery">
              <Gallery />
            </Route>
            <Route path="/about">
              <About />
            </Route>
            <Route path="/contact">
              <Contact />
            </Route>
          </Switch>

И в моем компоненте меню у меня есть useEffect, который запускает мою функцию, которая делает мою панель навигации короче или длиннее и помещает элементы панели навигации в выпадающий список, если нет свободного места.

 useEffect(() => {
    manageCategoriesNav();
    window.addEventListener('resize', () => manageCategoriesNav());
    window.removeEventListener('resize', () => manageCategoriesNav());
  }, [state.lang]);

Дело в том, что эта панель навигации находится только в моем компоненте меню, поэтому, когда я переключаюсь на другой маршрут и изменяю размер окна, я получаю сообщение об ошибке, потому что моя функция manageCategoriesNav() использует querySelector, который улавливает элементы, которые есть только в компоненте меню. Есть ли способ это исправить?

Ответ №1:

Да, эффекты могут возвращать обратный вызов именно для этого варианта использования!

Вы можете обернуть свой removeEventListener в вызов функции следующим образом:

 useEffect(() => {
    manageCategoriesNav();
    window.addEventListener('resize', () => manageCategoriesNav());
    return () => window.removeEventListener('resize', () => manageCategoriesNav());
  }, [state.lang]);

Затем react вызовет обратный вызов и, таким образом, удалит событие при вызове функции.

Кроме того, вам на самом деле не нужно создавать обратный вызов, поскольку manageCategoriesNav это уже функция, поэтому вы можете просто написать:

 useEffect(() => {
    manageCategoriesNav();
    window.addEventListener('resize', manageCategoriesNav);
    return () => window.removeEventListener('resize', manageCategoriesNav);
  }, [state.lang]);

Я не уверен на 100%, что state.lang это правильный ввод для вас useEffect !

Подробнее об этом читайте в официальной документации react https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1

Комментарии:

1. К сожалению, это не работает: (Возможно, потому, что я не сказал, что мой эффект использования находится в компоненте меню. Также укажите. lang существует, потому что я хочу запускать свою функцию всякий раз, когда я меняю язык в своем состоянии.

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

Ответ №2:

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

 useEffect(() => {
    manageCategoriesNav();
    window.addEventListener('resize', () => manageCategoriesNav());
    return () =>  window.removeEventListener('resize', () => manageCategoriesNav());
  }, [state.lang]);
Метки: