时间戳

首页 > 解决方案 > Reactjs，在 componentWillUnmount 上移除事件监听器，

javascript - Reactjs，在 componentWillUnmount 上移除事件监听器，

问题描述

我有一个小的反应应用程序。在我的主要组件之一中，我在 componentDidMount 上添加了一个事件侦听器，但是当我尝试在 componentWillUnmount 上删除它时，它似乎并没有这样做。我什至尝试将它们一个接一个地放置，但似乎仍然没有被删除。

这是我的情况的示例代码（从真实的减少）

listenerF(e){
  console.log('im scrolling!'
  //..actually does other stuff
}

componentDidMount(){
    window.addEventListener('scroll', e => this.listenerF(e))
}

componentWillUnmount(){
    window.removeEventListener('scroll',e=>this.listenerF(e))
    console.log('unmounted')
}

我怀疑它可能是充当匿名函数的箭头函数，因此 removeEventListener 没有正确匹配函数。

我尝试了一些替代方法来添加事件侦听器，仅使用函数调用或不使用箭头函数，但它似乎没有那样工作，所以我不确定我的语法或设置可能有什么问题，事件被正确添加，但无法删除

标签： javascriptreactjsevent-listenerlifecycle

解决方案

React 会自动将事件注入您的处理程序，无需将其包装在箭头函数中只是为了传递事件，问题是 React 没有引用您传递给处理程序的函数。

listenerF(e) { // dont forget to add the event as a parameter here
  console.log(e);
  console.log("im scrolling!");
}

componentDidMount() {
  window.addEventListener("scroll", this.listenerF);
}

componentWillUnmount() {
  window.removeEventListener("scroll", this.listenerF);
  console.log("unmounted");
}

推荐阅读