即使使用 useEffect 钩子的返回回调，事件侦听器也不会在 React 中删除答案

【问题标题】：Event listeners not removed in React even with useEffect hook's return callback即使使用 useEffect 钩子的返回回调，事件侦听器也不会在 React 中删除
【发布时间】：2021-08-26 13:12:09
【问题描述】：

我有一个组件在初始化期间注册一个键事件。此事件触发 API 调用以获取随机数据。

useEffect(() => {
    const keyUpEvent = (event) => {
      if (event.code === "Enter") {
        event.preventDefault();
        fetchRandomData();
      }
    };
    document.addEventListener("keyup", keyUpEvent);
    fetchRandomData();
    return () => {
      setChord({});
      document.removeEventListener("Keyup", keyUpEvent);
    };
  }, []);

但即使使用上面的代码，当我在页面之间导航并通过击键（ Enter KEY ）触发事件时，事件也不会被删除。

根据下图，当我在多个页面导航后按一次键时会发生这种情况。（内存泄漏）

问题：

为什么 react 没有删除注册的事件？删除事件侦听器的正确方法是什么..？

【问题讨论】：

标签： javascript reactjs react-hooks dom-events

【解决方案1】：

您的大写错误。您只需将 removeEventListener 中的 Keyup 更改为 keyup。

【讨论】：

我真的很抱歉。找不到差异，我的控制台中没有错误。顺便说一句，它起作用了。我的错。无论如何，谢谢...