如何在 React 中手动删除事件侦听器

Question

我正在使用反应钩子，我想有条件地添加和删除侦听器(不仅在我的组件卸载的情况下(。 我的组件添加了侦听器，但从不删除它。为什么会这样？

useEffect(() => {
if (isPlaying) {
document.addEventListener('keydown', handleKeyPress);
}
if (!isPlaying) {
document.removeEventListener('keydown', handleKeyPress);
}
return () => {
document.removeEventListener('keydown', handleKeyPress);
};
}, []);

Answer 1

问题是我忘了重新订阅isPlaying属性。没有任何参数，useEffect只运行一次，然后在销毁时清除。 在上面的代码中，useEffect 的调用方式与在 componentDidMount 中一样，碰巧isPlaying属性等于 true，因此添加了 eventListener。但是当isPlaying变得虚假时，useEffect 永远不会再次调用，显然，永远不会删除事件侦听器。 解决方法是将isPlaying作为第二个参数传递给 useEffect：

... return () => {
document.removeEventListener('keydown', handleKeyPress);
};
}, [isPlaying]);