Javascript 如何将removeEventListener与组件状态同步？

对不起，代码太乱了。真的把我自己弄得一团糟

我有一个

Nav

组件，我想在用户滚动时隐藏它。使用调用

scrollDetect（）

的事件侦听器（现在处于

useffect

，我不知道为什么）检测滚动

scrollDetect

然后设置一个状态变量，

scrollState

，该变量通过样式化组件连接到CSS

这一切都很好，除了我想在导航“托盘”打开时停止事件侦听器。导航托盘的打开状态存储在

isOpen[1]

中，但没有按正确的顺序进行更新。每当导航托盘打开时，按钮仍隐藏在滚动条上。要查看我所指的行为，请查看橡皮擦begin.net。尝试单击其中一个菜单按钮，然后滚动窗口

我已经仔细阅读了各种各样的指南、帖子和文档，但是我在这么多的圈子里走来走去，对此有点疯狂，请帮助我

导出默认函数Nav（）{
常量[isOpen，setIsOpen]=useState（[“”，false]）；
const[envOpen，setEnvOpen]=useState（false）；
常量[scrollState，setScrollState]=使用状态（“显示”）；
//向下滚动时隐藏导航按钮，向上滚动时显示
var lastScrollTop=window.pageYOffset | | window.scrollTop；
常量滚动检测=（）=>{
如果（等参线[1]==假）{
var st=window.pageYOffset | | document.documentElement.scrollTop；
如果（stlastScrollTop）{
setScrollState（“隐藏”）；
}
lastScrollTop=st{
console.log（isOpen[1]）；
const listener=document.addEventListener（“滚动”，scrollDetect）；
常量清理=（）=>{
文档。removeEventListener（“滚动”，listener）；
回流清理；
};
}，[isOpen[1]]；
const setOpen=（[title，state]）=>{
让newState=！state；
setIsOpen（[标题，新闻状态]）；
};
常量信封页=（）=>{
setEnvOpen（真）；
};
常量信封关闭=（）=>{
setEnvOpen（假）；
};

您没有正确删除事件侦听器。请尝试以下操作：

useffect（（）=>{
if（等参[1]）{
文档。添加的文本列表器（“滚动”，滚动检测）；
}否则{
document.removeEventListener（“滚动”，scrollDetect）；
}
return（）=>document.removeEventListener（“滚动”，scrollDetect）；
}，[isOpen]）；

您没有正确删除事件侦听器。请尝试以下操作：

useffect（（）=>{
if（等参[1]）{
文档。添加的文本列表器（“滚动”，滚动检测）；
}否则{
document.removeEventListener（“滚动”，scrollDetect）；
}
return（）=>document.removeEventListener（“滚动”，scrollDetect）；
}，[isOpen]）；

您需要两个useEffect：

这将一次性创建侦听器：

useffect（（）=>{ 文档。添加的文本列表器（“滚动”，滚动检测）； }，[]）

然后，当isOpen[1]为falsy时，另一个会将其移除：

useffect（（）=>{ 如果（！isOpen[1]）{ document.removeEventListener（“滚动”，scrollDetect）； } }，[isOpen]）

---

您需要两种效果：

这将一次性创建侦听器：

useffect（（）=>{ 文档。添加的文本列表器（“滚动”，滚动检测）； }，[]）

然后，当isOpen[1]为falsy时，另一个会将其移除：

useffect（（）=>{ 如果（！isOpen[1]）{ document.removeEventListener（“滚动”，scrollDetect）； } }，[isOpen]）

---

感谢您的回复：）不幸的是，这不起作用。当我在

useffect

中记录

isOpen[1]

的状态时，它显示的是正确的状态，但即使

isOpen[1]

为

true

…``useffect（（）=>{console.log（isOpen[1]）if（isOpen 1]），事件侦听器似乎仍然处于活动状态===false）{document.addEventListener（“滚动”，滚动检测）；}else{document.removeEventListener（“滚动，滚动检测）；}}，[isOpen[1]]“``好吧，这是上面的代码所期望的，不是吗？这只是一个如何正确添加和删除侦听器的示例：）这不是我所期望的。我所期望的是当isOpen[1]为真时删除事件侦听器，当isOpen[1]为真时恢复事件侦听器是错误的。这似乎是一件简单的事情，但我尝试过的任何事情都不起作用！感谢您的回答：）不幸的是，这不起作用。当我在

useffect

中记录

isOpen[1]

的状态时，它显示了正确的状态，但即使

isOpen[1]，事件侦听器似乎仍然处于活动状态

为

true

…``useffect（（）=>{console.log（isOpen[1]）if（isOpen[1]==false）{document.addEventListener（“滚动”，滚动检测）；}else{document.removeEventListener（“滚动，滚动检测）；}，[isOpen[1]]“``好吧，这是上面的代码所期望的，不是吗？这只是一个如何正确添加和删除侦听器的示例：）这不是我所期望的。我所期望的是当isOpen[1]为真时删除事件侦听器，当isOpen[1]为真时恢复事件侦听器是错误的。这似乎是一件很简单的事情，但我尝试过的都没有成功！谢谢你Abdul，但同样，这没有成功。当我记录

isOpen[1]

在第二个useEffect中，它在正确的时间接收到正确的信号，但事件侦听器仍处于活动状态！在进行了我建议的更改后，您能否共享最新的代码？谢谢Abdul，但同样，这不起作用。当我记录

isOpen[1]

在第二个useEffect中，它在正确的时间接收到正确的信号，但事件侦听器仍处于活动状态！在进行了我建议的更改后，您能否共享最新的代码？请有人帮忙。这似乎是不可能的。

removeEventListener