Reactjs，删除 componentWillUnmount 上的事件侦听器，

Question

我有一个小的反应应用程序。在我的主要组件之一中，我在 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 没有正确匹配这些函数。

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

Answer 1

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");
}