React.useEffect does not cleanup

Question

我有一个自定义的react钩子，用于检测外部点击。

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

好吧，那是我的错。一切都很好。问题是，我在页面的根目录中有另一个组件，它只有在离开时才会卸载。所以，输出是

mounted
mounted
unmounted
mounted
unmounted
...
unmounted