Слушатель событий не удаляется - PullRequest
Новая
       12

Слушатель событий не удаляется

2 голосов
/ 25 мая 2020

Этот код регистрирует прослушиватель событий прокрутки при загрузке содержимого DOM. Когда компонент отключен, я вызываю метод removeEventListener(), но прослушиватель событий не удаляется и вызывается в других компонентах. Где я ошибаюсь? Спасибо! 

useEffect(() => {
  return () => {
    document.removeEventListener('scroll', listener, true);
    console.log('unmount');
  };
}, []);

useLayoutEffect(() => {
  document.addEventListener('DOMContentLoaded', (event) => {
    document.addEventListener('scroll', listener, true);
  });
});

const listener = () => {
  let elementTop = $('.foo').offset().top;
  let elementBottom = elementTop + $('.foo').outerHeight();
  let viewportTop = $(window).scrollTop();
  let viewportBottom = viewportTop + $(window).height();
  let boolean = elementBottom > viewportTop && elementTop < viewportBottom;
  boolean ? setMapAbsolute(true) : setMapAbsolute(false);
};

Ответы [ 2 ]

2 голосов
/ 25 мая 2020

Поскольку добавление обработчика событий не меняет то, что отображается на экране, я бы рекомендовал добавить его в ваш useEffect() вместо useLayoutEffect(). Вы уже передаете пустой массив в качестве списка зависимостей для useEffect, что гарантирует, что обработчик событий будет добавлен только один раз. 

useEffect(() => {
  document.addEventListener('DOMContentLoaded', (event) => {
    document.addEventListener('scroll', listener, true);
  });
  return () => {
    document.removeEventListener('scroll', listener, true);
    console.log('unmount');
  };
}, []);
1 голос
/ 25 мая 2020

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

useLayoutEffect(() => {
 document.addEventListener('DOMContentLoaded', (event) => {
 document.addEventListener('scroll', listener, true);
 });
},[]);
...