Блог

LandingPage.js

Я добавил прослушиватель событий прокрутки при монтировании

 componentDidMount() {
    window.addEventListener('scroll', this.scrollNavigation, true);
}
  

Я удаляю его перед размонтированием

 componentWillUnmount() {
    window.removeEventListener('scroll', this.scrollNavigation);
    console.log("unmountedLandingPage")
  }
  

Функция

 scrollNavigation = () => {
        console.log("called")
        const doc = document.documentElement;
        const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
        if (top > 80) {
          document.getElementById('topnav').classList.add('nav-sticky');
        } else {
          document.getElementById('topnav').classList.remove('nav-sticky');
        }
      }
  

Проблема

Когда я перехожу на другую страницу, я вижу, что была напечатана ‘unmontedLandingPage’. Однако, когда я прокручиваю там, я все еще вижу, что «вызывается» печатается. Почему мой removeEventListener не работал?

Если прослушиватель зарегистрирован дважды, один с захватом, а другой без, удалите каждый из них отдельно. Удаление перехватывающего прослушивателя не влияет на версию того же прослушивателя, и наоборот.

Источник — https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

Итак, в вашем случае вы регистрируете прослушивающего прослушивателя, но пытаетесь удалить не захватывающего. Это не сработает.

Вы должны перейти true к вызову removeEventListener:

 componentWillUnmount() {
    window.removeEventListener('scroll', this.scrollNavigation, true);
    console.log("unmountedLandingPage")
  }
  

Из документов:

В то время как addEventListener() позволит вам добавлять один и тот же прослушиватель более одного раза для одного и того же типа, если параметры разные, единственным параметром removeEventListener() проверяет флаг захвата / использования. Его значение должно совпадать для соответствия removeEventListener(), но другие значения этого не делают.