Ошибка при использовании useeffect и useref TypeError: невозможно прочитать свойство getBoundingClientRect со значением null

Здравствуйте, у меня проблемы с useref, мое приложение продолжает читать код со страницы, на которой меня больше нет

const LandingPage = () => {
    useEffect(() => {
        document.addEventListener("scroll", () => {
            if (window.scrollY < (window.pageYOffset + divRef1.current.getBoundingClientRect().bottom)) {
                onHeaderColorSwitch('#c8e9e6')
                console.log('green')
            } else if (window.scrollY >= (window.pageYOffset + divRef2.current.getBoundingClientRect().top) && window.scrollY < (window.pageYOffset + divRef2.current.getBoundingClientRect().bottom)) {
                onHeaderColorSwitch('#ffae5a')
            } else if (window.scrollY >= (window.pageYOffset + divRef3.current.getBoundingClientRect().top) && window.scrollY < (window.pageYOffset + divRef3.current.getBoundingClientRect().bottom)) {


            }
        })
    }, [])
}

У меня есть этот код, но когда я перехожу на страницу контактов с помощью этого

function App() {
  
  let routes =<Switch>

   <Route path="/" exact component={landingPage}/>
   <Route path="/contact" exact component={contactPage}/>
  
  </Switch>

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

TypeError: Cannot read property 'getBoundingClientRect' of null
HTMLDocument.<anonymous>
my-app/src/screens/landingPage.js:22
  19 | 
  20 | useEffect(() => {
  21 |     document.addEventListener("scroll", () => {
> 22 |         if (window.scrollY < (window.pageYOffset + divRef1.current.getBoundingClientRect().bottom)) {
     | ^  23 |             onHeaderColorSwitch('#c8e9e6')
  24 | 
  25 |         } else if (window.scrollY >= (window.pageYOffset + divRef2.current.getBoundingClientRect().top) &&  window.scrollY < (window.pageYOffset + divRef2.current.getBoundingClientRect().bottom)) {

Слушатели событий все еще слушают, хотя я сейчас на новой странице. Как только я обновлю страницу, ошибка не повлияет на меня. Как мне предотвратить это сейчас и в будущем?


reactjs javascript react-hooks use-effect use-ref
person Oisin    schedule 19.11.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно удалить слушателя в функции обратного вызова useEffect:

useEffect(() => {
  const listener = () => {
     if (window.scrollY < (window.pageYOffset + divRef1.current.getBoundingClientRect().bottom)) {
         onHeaderColorSwitch('#c8e9e6')
         console.log('green')
     } else if (window.scrollY >= (window.pageYOffset + divRef2.current.getBoundingClientRect().top) &&  window.scrollY < (window.pageYOffset + divRef2.current.getBoundingClientRect().bottom)) {
         onHeaderColorSwitch('#ffae5a')
     } else if (window.scrollY >= (window.pageYOffset + divRef3.current.getBoundingClientRect().top) &&  window.scrollY < (window.pageYOffset + divRef3.current.getBoundingClientRect().bottom)) {
     }
  }
  document.addEventListener("scroll", listener);
  return () => {
    // Clean up the subscription
    document.removeEventListener(listener);
  };
}, []);

Здесь вы найдете более подробное объяснение.

person Michael S. Molina    schedule 19.11.2020
comment
Большое тебе спасибо - person Oisin; 19.11.2020