繁体   English   中英

无法在useEffect之外删除事件侦听器

[英]Cannot remove an event listener outside useEffect

我在useEffect添加了一个事件监听useEffect 由于useEffect第二个参数( [] ),它在第一次重新渲染后运行一次。 然后我尝试在useEffect (在handleSearch函数)之外删除它,但它不起作用。 我怀疑它与功能范围有关,但不完全理解。 也许有一个解决方法?

const handleSearch = () => {
  window.removeEventListener('resize', setPageHeightWrapper);
};

const [pageHeight, setPageHeight] = useState(0);

function setPageHeightWrapper() { setPageHeight(window.innerHeight); };
useEffect(() =>{
  window.addEventListener('resize', setPageHeightWrapper);
  return () => {
    window.removeEventListener('resize', setPageHeightWrapper);
  };
}, []);

它不起作用的原因是因为setPageHeightWrapper被定义为内联函数,并且当组件重新呈现它的新实例时,并且在清除事件侦听器时,您需要传递在设置侦听器时传递的相同方法。

另一方面,当调用useEffect钩子时,从其闭包中获取函数引用,并使用相同的引用来清除侦听器。

使removeListener在useEffect之外工作的一种方法是使用useCallback钩子

const handleSearch = () => {
  window.removeEventListener('resize', memoHeightWrapper);
};

const [pageHeight, setPageHeight] = useState(0);


const memoHeightWrapper = useCallback(() => {
    setPageHeight(window.innerHeight);
})
useEffect(() =>{
  window.addEventListener('resize', memoHeightWrapper);
  return () => {
    window.removeEventListener('resize', memoHeightWrapper);
  };
}, []);

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM