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

Question

我有一个组件在初始化期间注册了一个按键事件。此事件触发 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）。

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

问题：

为什么反应不删除注册的事件？删除事件侦听器的正确方法是什么..？

Answer 1

您的大写字母不正确。您只需将 removeEventListener 中的 Keyup 更改为 keyup。

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

Event listeners not removed in React even with useEffect hook's return callback

javascript

dom-events

reactjs

react-hooks