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