在两个页面之间导航时，React Scroll Event 重复，导致同时触发功能

如何解决在两个页面之间导航时，React Scroll Event 重复，导致同时触发功能

好的情况是以下和有史以来的第一篇文章， 活动注册后，当我在第 1 页时，一切都很好，但是 在单击“返回”按钮并导航回事件代码所在的第 1 页后，我有打开第 2 页的链接（我正在使用 history.push(pathName,state) 进行导航），

useEffect(()=>{
// window.addEventListener('scroll',debounce((event) => {
// console.log('Scrolling...');
// }),500);
// return() => window.removeEventListener('scroll',debounce);
window.addEventListener('scroll',debounce(test2,500));
return()=> window.removeEventListener('scroll',500));
},[])


function test2(){
let innerHeight = window.innerHeight;
let pageYOffset = window.pageYOffset;
let scrollHeightBodyAvailable = document.body.scrollHeight;
console.log(scrollHeightBodyAvailable);
// if((pageYOffset+innerHeight)>(scrollHeightBodyAvailable-innerHeight)){
// console.log('fetch more List items' + (pageYOffset+innerHeight));
// }

}

重复此序列几次后，当我在第 1 页上向下滚动并检测到 scroll 事件时，它会同时触发多次，如下图所示

console.log

正如您在图像中看到的，它将输出 6 分组（它们同时被触发），我尝试使用 useRef 来缓解该问题，但该函数被执行了 6 次，然后useRef 更新，然后函数以更新的 useRef 状态执行 6 次

我做错了什么，我想我在这里缺少一些基本知识