注销后如何删除鼠标向上事件处理程序？

Question

My code is here .

The route guard can prevent the url '/protected/operation' from unauthorized access.

I have a mouseup event handler in the AdminOperation component.

The mouseup event handler just shows "mouse up" in the console. My problem is that the event handler still working after I click the logout button.

At this moment, if I browse other URL, the event handler will not work again.

How can I remove the mouse up event handler after logout in react?

Answer 1

Add a cleanup method for the useEffect by returning a function from useEffect.

import React,{useEffect} from "react";
export default function AdminOperation(){
  useEffect(()=>{
    document.addEventListener('mouseup',mouseUp);
    return () => {
      document.removeEventListener('mouseup', mouseUp)
    }
  });
  let mouseUp=(e)=>{
    console.log("mouse up");
  }
  return(
    <h3>
      This is Admin. Operation page.
    </h3>
  )
}

documentation -https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup