如何修复：无法对未安装的组件 Next.js 执行 React 状态更新 || onScroll 事件答案

【问题标题】：how to fix : Can't perform a React state update on an unmounted component Next.js || onScroll event如何修复：无法对未安装的组件 Next.js 执行 React 状态更新 || onScroll 事件
【发布时间】：2021-06-19 02:04:08
【问题描述】：

这里是代码

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

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

得到这个错误

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

【问题讨论】：

标签： next.js use-state onscroll

【解决方案1】：

您需要在 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);
}, []);

【讨论】：

在清理时仍然给出同样的错误return () => window.removeEventListener('scroll', scrollListener);