javascript - 在 componentWillUnmount 方法中取消所有订阅和异步任务

Question

有人可以让我知道我在 componentWillUnmount 我的代码中缺少什么吗。

错误是

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Layout (created by RoomsPage)
    in RoomsPage (created by HotExportedRoomsPage)
    in AppContainer (created by HotExportedRoomsPage)
    in HotExportedRoomsPage (created by PageRenderer)

像我们大多数人一样看过它一千遍，但我似乎无法卸载。我的问题代码是；

  componentDidMount() {
    if (typeof window !== 'undefined') {
      window.addEventListener('scroll', debounce(this.handleScroll, 32));
    }
  }

  componentWillUnmount() {
    if (typeof window !== 'undefined') {
      window.removeEventListener('scroll', debounce(this.handleScroll, 32));
    }
  }

  handleScroll = () => {
    const scrollPositionY = +window.scrollY;
    return this.setState({ scrollPositionY });
  };

Answer 1

您没有删除事件监听器，因为您将不同的函数传递给 addEventListener 和 removeEventListener。这是因为定义相同的两个函数不相等。自己看看:

(() => true) === (() => true) 
// false

您需要定义您的函数，然后传递它。

componentDidMount() {
  window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {       
  window.removeEventListener('scroll', this.handleScroll);
}

handleScroll = debounce(
  () => { this.setState({ scrollPositionY: +window.scrollY }) },
  32
);

顺便说一句，在大多数情况下，您也不需要在 componentDidMount 或 componentWillUnmount 中检查 window ... SSR 不需要安装组件。