我在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);
};
},[]);
原文地址:https://www.jb51.cc/js/531142.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。