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

  • Z时代
  • 2024-01-10
  • 分类：问答

我在里面添加了一个事件监听器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);
  };
}, []);

以上是 无法在useEffect之外删除事件侦听器 的全部内容， 来源链接： utcz.com/qa/429564.html

回到顶部