在React使用效果中使用清理功能

Question

在我的应用程序中，有一个Navbar在用户滚动到某个点之后会弹出。我使用两个单独的纳维尔巴尔，然后定义当前的滚动位置：

 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管理和授予的，这是由变化的滚动位置触发的：

 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>

最后使用效率来利用状态：

 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

您的第二个useseffect包含复制/粘贴错误。
它应该删除scrollpos（因为这是您绑定的），而不是sticknavbar。

由于此scrollpos未删除侦听器，因此在下一个scroll事件上导致错误，因为在将组件从DOM中删除后不再存在绑定函数。