無法在 React 應用程序中刪除事件偵聽器

Question

所以有一個 function 看起來像這樣

function eventListener(e) {
    if (!modalRef.current.contains(e.target)) {
      setOpenModal(false);
    }
  }

我添加了一個事件偵聽器以在啟動時偵聽事件氣泡

 useEffect(() => {
    document.body.addEventListener("click", eventListener, true);
    return () => {
      document.body.removeEventListener("click", eventListener, true);
    };
  }, []);

當組件正在監聽氣泡時 state

 useDidMountEffect(() => {
    console.log("hello the buble is", buble);
    if (buble) {
      document.body.addEventListener("click", eventListener, true);
    } else {
      console.log("I'm in false mode");
      document.body.removeEventListener("click", eventListener, true);
    }
  }, [buble]);

但遺憾的是無法刪除它證明它沒有刪除

我看過這些網站

1. https://www.edureka.co/community/71646/find-event-listeners-node-when-debugging-from-javascript-code

2. 無法刪除所有事件偵聽器

我也使用了箭頭 function 但它沒有用。 而且 useDidMountEffect 是一個自定義掛鈎，因此 function 不會在啟動時運行，而是在我安裝它時運行

Answer 1

您必須將 eventListener function 包裝到具有空依賴項數組的 useCallBack。

const eventListener = useCallback(function (e) {
  if (!modalRef.current.contains(e.target)) {
    setOpenModal(false);
  }
}, []);