Question

我有一个小型的React应用。在我的主要组件之一中，我在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没有对您传递给处理程序的函数的引用。

:checked

Answer 2

这里的问题是您正在使用两种不同的功能：一种在添加事件侦听器时创建的功能（箭头功能）。尝试删除侦听器（箭头功能）时使用的是另一种

作为文档状态：

要删除的事件侦听器是通过事件类型，事件侦听器函数本身以及可能影响匹配过程的各种可选选项的组合来标识的。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

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

2 个答案: