Question

我正在使用react挂钩，并且我想有条件地添加和删除侦听器（不仅是在卸载组件的情况下）。我的组件添加了侦听器，但是从不删除它。为什么会这样？

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不会再被调用，并且显然也不会删除eventlistener。解决方法是将isPlaying作为useEffect的第二个参数传递：

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

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

1 个答案: