Javascript useEffect不会删除我的事件侦听器

我有一个自定义的钩子，可以设置多个事件侦听器，这些侦听器可以按预期的方式工作。但我注意到，我的事件侦听器在重新播放时不会被删除。我做错了什么（代码最后一部分中的事件侦听器）？也就是说，我在锚定标签事件上注意到了这一点<代码>handleLink

导出默认函数useCursorSelector(
selectorRef:React.reObject，
onClickLink：（url:string）=>void，
onSelect：（text:string）=>void
) {
const classes=useStyles（）；
const handleSelection=React.useCallback(
（事件：MouseEvent）=>{
常量选择：选择| null=window.getSelection（）；
如果（选择）{
const text=fullStringSelection（选择）；
selection.removeAllRanges（）；
onSelect（文本）；
}
event.stopPropagation（）；
},
[选择]
);
const handleLink=React.useCallback(
（a:HTMLanchoreElement）=>（e:MouseeEvent）=>{
e、 预防默认值（）；
onClickLink（a.href）；
},
[点击链接]
);
React.useffect（（）=>{
如果（选择或引用当前值）{
wrapInSpans（选择orref.current、classes.highlight、onClickLink）；
}
}，[classes.highlight，selectorRef，onClickLink]）；
React.useffect（（）=>{
selectorRef！
.current！.querySelectorAll（`.${classes.highlight}`）
.forEach（（e:any）=>{
e、 addEventListener（“mouseup”，handleSelection）；
});
selectorRef！
.current！.querySelectorAll（`a`）
.forEach（（a:htmlanchoreElement）=>{
a、 添加文本列表（“单击”，handleLink（a））；
});
return（）=>{
selectorRef！
.current！.querySelectorAll（`.${classes.highlight}`）
.forEach（（e:any）=>{
e、 removeEventListener（“mouseup”，handleSelection）；
});
selectorRef！
.current！.querySelectorAll（`a`）
.forEach（（a:htmlanchoreElement）=>{
a、 删除EventListener（“单击”，手动链接（a））；
});
};
}，[handleSelection，handleLink，classes.highlight，selectorRef]）；
}

每次调用handleLink（a）时，您都在创建一个新的匿名函数，用作事件处理程序的回调

调用

removeEventListener

时，应该传递对用于附加事件的同一回调的引用，但是每次调用

handleLink

时，您都在创建一个新的匿名函数

您可以以某种方式存储对所创建回调的引用，或者重写

handleLink

，这样就根本不需要传递元素

const handleLink = React.useCallback((e: MouseEvent) => {
    e.preventDefault();
    onClickLink(e.currentTarget.href);
}, [onClickLink]);

...

React.useEffect(() => {
  selectorRef!
    .current!.querySelectorAll(`.${classes.highlight}`)
    .forEach((e: any) => {
      e.addEventListener("mouseup", handleSelection);
    });
  selectorRef!
    .current!.querySelectorAll(`a`)
    .forEach((a: HTMLAnchorElement) => {
      a.addEventListener("click", handleLink);
    });
  return () => {
    selectorRef!
      .current!.querySelectorAll(`.${classes.highlight}`)
      .forEach((e: any) => {
        e.removeEventListener("mouseup", handleSelection);
      });
    selectorRef!
      .current!.querySelectorAll(`a`)
      .forEach((a: HTMLAnchorElement) => {
        a.removeEventListener("click", handleLink);
      });
  };
}, [handleSelection, handleLink, classes.highlight, selectorRef]);