使用 useeffect 和 useref 时出错 TypeError：无法读取 null 的属性

Question

您好，我遇到了 userref 问题，我的应用程序不断从我不再访问的页面读取代码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 nullHTMLDocument.<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)) {即使我现在位于新页面，事件侦听器仍在侦听。一旦刷新页面，该错误就不会影响我，现在和将来如何防止这种情况发生？

Answer 1

您需要在 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);

  };

}, []);