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

2019-12-11 04:35:31 阅读：883 来源： 互联网

我在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);
  };
}, []);

标签：reactjs,react-hooks,javascript
来源： https://codeday.me/bug/20191211/2106469.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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