Javascript Reactjs,删除componentWillUnmount上的事件侦听器,

Javascript Reactjs,删除componentWillUnmount上的事件侦听器,,javascript,reactjs,event-listener,lifecycle,Javascript,Reactjs,Event Listener,Lifecycle,我有一个小应用程序。在我的一个主要组件中,我在componentDidMount上添加了一个事件侦听器,但当我尝试在componentWillUnmount上删除它时,它似乎没有这样做。我甚至试着把它们一个接一个地放在一起,但它似乎仍然没有被移除 这是我的情况的示例代码(从真实代码中缩减) 我怀疑可能是arrow函数充当匿名函数,因此removeEventListener没有正确匹配这些函数 我尝试了一些方法来添加事件监听器,只使用函数调用或不使用箭头函数,但它似乎不是这样工作的,因此我不确定我

我有一个小应用程序。在我的一个主要组件中,我在componentDidMount上添加了一个事件侦听器,但当我尝试在componentWillUnmount上删除它时,它似乎没有这样做。我甚至试着把它们一个接一个地放在一起,但它似乎仍然没有被移除

这是我的情况的示例代码(从真实代码中缩减)

我怀疑可能是arrow函数充当匿名函数,因此removeEventListener没有正确匹配这些函数


我尝试了一些方法来添加事件监听器,只使用函数调用或不使用箭头函数,但它似乎不是这样工作的,因此我不确定我的语法或设置是否有问题,事件是否添加正确,但是无法删除它这里的问题是您使用了两个不同的函数:一个是在添加事件侦听器时创建的(箭头函数)。当您尝试删除侦听器时使用的另一个侦听器(箭头函数)

如文件所述:

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


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

您不需要arrow函数,直接执行此操作。functionName,您仍然可以访问事件参数而不会出现问题,您可能还需要绑定处理程序
this.functionName.bind(this)
谢谢!!实际上我已经试过了,但它只调用了一个,但后来我意识到我是用括号window.addEventListener(“scroll”,this.listenerF())调用它的。。这是唯一一次(现在看来很明显)感谢!
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");
}