如何修复：无法在未挂载的组件 Next.js 上执行 React 状态更新 ||滚动事件

如何解决如何修复：无法在未挂载的组件 Next.js 上执行 React 状态更新 ||滚动事件

这里是代码

const [scroll,setScroll] = useState(false);

 useEffect(() => {
   window.addEventListener("scroll",() => {
     setScroll(window.scrollY > specify_height_you_want_to_change_after_here);
   });
 },[]);

得到这个错误

警告：无法对卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请取消 useEffect 清理函数中的所有订阅和异步任务。

解决方法

您需要在 useEffect 清理函数中删除您的事件侦听器。此函数在组件卸载时运行。

useEffect(() => {
  window.addEventListener("scroll",() => {
    setScroll(window.scrollY > specify_height_you_want_to_change_after_here);
  });

  return () => window.removeEventListener("scroll",() => {
    setScroll(window.scrollY > specify_height_you_want_to_change_after_here);
  });
},[]);

为了使您的代码更具可读性，您可能需要将侦听器分离为一个单独的函数。

useEffect(() => {
  const scrollListener = () => {
    setScroll(window.scrollY > specify_height_you_want_to_change_after_here);
  }

  window.addEventListener("scroll",scrollListener);

  return () => window.removeEventListener('scroll',scrollListener);
},[]);