Javascript 如何停止交叉观察

有人能帮我找出为什么我下面的代码仍然保留加载数据，即使它是空的吗

/**@格式*/
从“React”导入{React，useffect，useState，useRef}；
从'react bootstrap'导入{CardDeck}；
从“Axios”导入Axios；
从“/Hero/Heros”导入英雄；
函数HerosContainer（）{
//从后端到前端的数据
常量[HeroList，setHeroList]=useState（[]）；
//如果lastElement出现，则进行设置
const[loading，setLoading]=useState（false）；
//设置列表页码
常量[pageNumber，setPageNumber]=useState（0）；
//如果有更多的数据
const[hasMore，setHasMore]=useState（true）；
//它将仅在组件退出时运行
useffect（（）=>{
document.title='Heros List'；
}, []);
//滚动时函数fetcherolist
常量fetcherolist=async（页码）=>{
常量url=`http://localhost:3001/Heros/${pageNumber}`；
const result=等待Axios.get（url.catch）（（err）=>{
log（'Error:'，err）；
});
//如果列表不是空的
if（result&&result.data.length>0）{
setHeroList（（HeroList）=>[…HeroList，…result.data]）；
设置加载（真）；
console.log（'in if'）；
}
console.log（'results'，result.data）；
};
console.log（'加载状态'，加载）；
console.log（'pageNumber'，pageNumber）；
//当页码更改时运行
useffect（（）=>{
fetcherolist（页码）；
//eslint禁用下一行react HOOK/deps
}，[pageNumber]）；
//如果加载为true，则获取
const loadMore=（）=>{
//添加页码
setPageNumber（（prevPageNumber）=>prevPageNumber+1）；
};
//作为回报的最后一个元素
const lastElement=useRef（）；
//加载更改时运行
useffect（（）=>{
如果（装载）{
const observer=新的IntersectionObserver(
（条目）=>{
//如果isIntersecting为false，则表示尚未显示元素
if（条目[0]。isIntersecting）{
loadMore（）；
log（'load more'）；
如果（！hasMore）{
//如果hasMore false意味着没有要获取的内容，那么就取消对元素的观察
控制台日志（“未送达”）；
不可观测的观察者（最后一个元素，当前）；
}
}
},
{阈值：1}
);
观察者。观察者（最后一个元素。当前）；
}
}，[loading，hasMore]）；
返回(
{HeroList.map（（val，index）=>{
返回；
})}
);
}
导出默认HerosContainer；

我知道它一直在运行，因为加载仍然正确，但何时何地应该更改状态

当页码变为8时，逻辑上将得到result=[]，但下面是控制台运行时的结果

这是数组的结尾

请帮助我找出应该在哪里加载

和
hasMore
来设置true或false。
我在MySQL中总共有58个数据，一次获取8个数据。希望有人能帮我找出问题所在，谢谢！！！谢谢大家~
当结果数组长度为零时，您可以将
hasMore
状态设置为false。否则，您可以让API为每个请求提供
totalpages
和
currentpage
，以便跟踪！希望能有帮助