在 React UseEffect 中使用清理函数

Question

在我的应用程序中，有一个导航栏会在用户滚动到某个点后弹出。我使用两个单独的导航栏并像这样定义当前滚动位置：

 const newNavbar = () => {
      if (window !== undefined) {
        let posHeight_2 = window.scrollY;
        posHeight_2 > 112 ? setNewNav(!newNav) : setNewNav(newNav)
      }
    };

  const stickNavbar = () => {
    if (window !== undefined) {
      let windowHeight = window.scrollY;
      windowHeight > 150 ? setSticky({ position: "fixed", top: "0", marginTop:"0", transition: "top 1s"}) : setSticky({});
    }
  };
  const scrollPos = () => {
    if (window !== undefined) {
      let posHeight = window.scrollY;
      posHeight > 112 ? setScroll(posHeight) : setScroll(0)
    }
  };

当前状态由 useState 管理并提供给 class，它由更改滚动位置触发：

 const [scroll, setScroll] = useState(0);
 const [newNav, setNewNav] = useState (false)
 const [sticky, setSticky] = useState({});

 const navClass = newNav ? 'menu-2 show' : 'menu-2'
 <Navbar className={navClass}> 
  //
 </Navbar>

最后使用 UseEffect 来使用状态：

 React.useEffect(() => {
      window.addEventListener('scroll', stickNavbar);
      return () => window.removeEventListener('scroll', stickNavbar);
    }, []);
  
  React.useEffect(() => {
      window.addEventListener('scroll', scrollPos);
      return () => window.removeEventListener('scroll', stickNavbar);
      }, []);
  
  React.useEffect(() => {
      window.addEventListener('scroll', newNavbar);
      return () => window.removeEventListener('scroll', newNavbar);
      }, []);

但是我的清理功能不起作用，我收到错误警告：无法对未安装的组件执行 React 状态更新。

Answer 1

您的第二个 useEffect 包含一个 copy/paste 错误。
它应该删除 scrollPos （因为这是你绑定的），而不是 stickNavbar.

因为这个 scrollPos 侦听器没有被删除，这会导致下一个 scroll 事件出错，因为绑定函数在组件从 DOM 中删除后不再存在.

在 React UseEffect 中使用清理函数

Using cleanup function in React UseEffect

state

code-cleanup

reactjs

use-effect