javascript - Reactjs, removing event listener on componentWillUnmount, - Stack Overflow

admin管理员组

文章数量:1026989

I have a small react app. in One of my main ponents, I am adding an event listener on ponentDidMount but when I try to remove it on ponentWillUnmount it does not seem to be doing it. I have even tried putting them one after the other and still it does not seem to be removed.

Here is sample code of my situation (reduced from the real one)

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

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

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

I suspect it might be the arrow function acting as an anonymous function, and therefore removeEventListener isn't matching the functions properly.

I tried some alternatives to add the event listener with just a function call or without an arrow function, but it didnt seem to work like that, so Im not sure what may be wrong with my syntax or setup that the event is getting added right, but cannot remove it

I have a small react app. in One of my main ponents, I am adding an event listener on ponentDidMount but when I try to remove it on ponentWillUnmount it does not seem to be doing it. I have even tried putting them one after the other and still it does not seem to be removed.

Here is sample code of my situation (reduced from the real one)

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

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

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

I suspect it might be the arrow function acting as an anonymous function, and therefore removeEventListener isn't matching the functions properly.

I tried some alternatives to add the event listener with just a function call or without an arrow function, but it didnt seem to work like that, so Im not sure what may be wrong with my syntax or setup that the event is getting added right, but cannot remove it

• javascript
• reactjs
• event-listener
• lifecycle

Share Improve this question Follow asked Oct 29, 2018 at 4:26 xunuxxunux 1,77955 gold badges2222 silver badges4242 bronze badges 1

• You don't need the arrow function, do this.functionName directly, you will still be able to access your event argument without issues, you'll probably also need to bind your handler this.functionName.bind(this) – nedo Commented Oct 29, 2018 at 4:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

React injects the event to your handler automatically there is no need to wrap it in an arrow function just to pass the event, the problem is that React had no refference to the function that you passed to your handler.

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

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

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

The problem here is that you are using two different functions: One that is created when you add the event listener (the arrow function). And a different one that you use when you try to remove the listener (the arrow function.)

As the documentation state:

The event listener to be removed is identified using a bination of the event type, the event listener function itself, and various optional options that may affect the matching process.

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

I have a small react app. in One of my main ponents, I am adding an event listener on ponentDidMount but when I try to remove it on ponentWillUnmount it does not seem to be doing it. I have even tried putting them one after the other and still it does not seem to be removed.

Here is sample code of my situation (reduced from the real one)

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

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

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

I suspect it might be the arrow function acting as an anonymous function, and therefore removeEventListener isn't matching the functions properly.

I tried some alternatives to add the event listener with just a function call or without an arrow function, but it didnt seem to work like that, so Im not sure what may be wrong with my syntax or setup that the event is getting added right, but cannot remove it

I have a small react app. in One of my main ponents, I am adding an event listener on ponentDidMount but when I try to remove it on ponentWillUnmount it does not seem to be doing it. I have even tried putting them one after the other and still it does not seem to be removed.

Here is sample code of my situation (reduced from the real one)

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

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

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

I suspect it might be the arrow function acting as an anonymous function, and therefore removeEventListener isn't matching the functions properly.

I tried some alternatives to add the event listener with just a function call or without an arrow function, but it didnt seem to work like that, so Im not sure what may be wrong with my syntax or setup that the event is getting added right, but cannot remove it

• javascript
• reactjs
• event-listener
• lifecycle

Share Improve this question Follow asked Oct 29, 2018 at 4:26 xunuxxunux 1,77955 gold badges2222 silver badges4242 bronze badges 1

• You don't need the arrow function, do this.functionName directly, you will still be able to access your event argument without issues, you'll probably also need to bind your handler this.functionName.bind(this) – nedo Commented Oct 29, 2018 at 4:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

React injects the event to your handler automatically there is no need to wrap it in an arrow function just to pass the event, the problem is that React had no refference to the function that you passed to your handler.

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

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

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

The problem here is that you are using two different functions: One that is created when you add the event listener (the arrow function). And a different one that you use when you try to remove the listener (the arrow function.)

As the documentation state:

The event listener to be removed is identified using a bination of the event type, the event listener function itself, and various optional options that may affect the matching process.

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

本文标签： javascriptReactJSremoving event listener on componentWillUnmount Stack Overflow