React.useEffect 不清理

Question

我有一個用於檢測外部點擊的自定義反應鈎子。

function useOutsideClick(ref, onOutsideClick) {
  useEffect(() => {
    const onClick = event => {
      if (!ref.current?.contains?.(event.target)) {
        onOutsideClick(event);
      }
    }
    console.log('mounted');
    document.addEventListener('click', onClick);
    return () => {
      document.removeEventListener('click', onClick);
      console.log('unmounted');
    }
  }, [onOutsideClick])
}

這是我在控制台中看到的。

mounted

mounted
unmounted

mounted
unmounted

...

結果，我有兩個事件偵聽器而不是一個，因為其中一個沒有清理。 我究竟做錯了什么？

Answer 1

好吧，那是我的錯。 一切正常。 問題是我在頁面的根目錄中有另一個組件，僅在離開時才會卸載。 所以，output 是

mounted

mounted
unmounted

mounted
unmounted

...

unmounted