Javascript 如何在react中注销后删除鼠标启动事件处理程序？

我的密码是

route guard可以防止url“/protected/operation”被未经授权的访问

我在AdminOperation组件中有一个

mouseup

事件处理程序

mouseup

事件处理程序只是在控制台中显示“鼠标向上”。 我的问题是，在单击“注销”按钮后，事件处理程序仍在工作

此时，如果我浏览其他URL，事件处理程序将不再工作

---

在react中注销后如何删除鼠标启动事件处理程序？

通过从useEffect返回函数为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>
  )
}

import React，{useffect}来自“React”；
导出默认函数AdminOperation（）{
useffect（（）=>{
文件。添加的列表器（“鼠标”，鼠标）；
return（）=>{
document.removeEventListener（'mouseup'，mouseup）
}
});
让鼠标悬停=（e）=>{
console.log（“鼠标向上”）；
}
返回(
这是管理操作页面。
)
}

---

文档-

您的代码应该在这里。它有助于快速扫描和复制粘贴，也有助于将来链接断开时人们来到这里。我昨天尝试了类似的解决方案，但没有成功。幸运的是它今天起作用了。