Javascript 反应自蔓延

我试图实现产品列表的延迟加载。我模拟了对服务器的异步请求。即使项目结束，用户也应该能够通过滚动更新页面。
问题是，当加载元素消失时，它会执行handleScroll（）处理程序，因为页面的高度改变，无限循环开始。但我只想在用户滚动页面时执行handleScroll（）。
以下是我的组件的代码：

import React from 'react';
import './items-list.css';

import ItemsListItem from './items-list-item.jsx';

export default class ItemsList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        categoryId: this.props.categoryId,
        items: [],
        isLoading: true
      }
    }

    componentDidMount(){
      window.addEventListener('scroll', this.handleScroll());
      this.simulateAsyncGetItems(10);
    }

    componentWillUnmount(){
      window.removeEventListener('scroll', this.handleScroll());
    }

    simulateAsyncGetItems(n){//TODO: delete in prod
      this.setState({
        isLoading: true
      });
      setTimeout(() => {
        let res = this.getItems(this.props.categoryId, n, this.state.items.length);
        this.setState({
          items: [...this.state.items, ...res],
          isLoading: false
        });
      }, 1000);
    }

    getItems(categoryId, limit, offset){
      //TODO: implement request to fetch data from server
      if(offset >= 20) {
        return []
      }
      return categoryId === -1 ? [] : new Array(limit).fill(
        {
          id: 12345678,
          categoryId: categoryId,
          name: "Product name might be long",
          img: "boat.jpg",
          price: 1111.11
        });//dummy
    }

    handleScroll(){
      return (event) => {
        let relativeScrollOffset = //scroll offset from 0.0 to 1.0
          event.srcElement.scrollingElement.scrollTop /
          (event.srcElement.scrollingElement.scrollHeight - event.srcElement.scrollingElement.clientHeight);
        if (!this.state.isLoading && !this.state.noMoreData && relativeScrollOffset >= 0.9)
          this.simulateAsyncGetItems(5);
      }
    }

    render() {
      return(
        <div className="items-list" >
          {(this.state.items && Array.isArray(this.state.items)) && this.state.items.map((item, i) =>
            <ItemsListItem
                id={item.id}
                img={item.img}
                name={item.name}
                price={item.price}
                key={i}
              />
          )}
          {this.state.isLoading&&
            <div>
              Data is loading, please wait...
            </div>
          }
        </div>
      );
    }
}

从“React”导入React；
导入“./items list.css”；
从“./items list item.jsx”导入ItemsListItem；
导出默认类ItemsList扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
categoryId:this.props.categoryId，
项目：[]，
孤岛加载：正确
}
}
componentDidMount（）{
window.addEventListener（'scroll'，this.handleScroll（））；
这是模拟同步项（10）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleScroll（））；
}
SimulateSyncGetItems（n）{//TODO:在prod中删除
这是我的国家({
孤岛加载：正确
});
设置超时（（）=>{
让res=this.getItems（this.props.categoryId，n，this.state.items.length）；
这是我的国家({
items:[…this.state.items，…res]，
孤岛加载：false
});
}, 1000);
}
getItems（类别ID、限制、偏移）{
//TODO:实现从服务器获取数据的请求
如果（偏移量>=20）{
返回[]
}
return categoryId===-1？[]：新数组（限制）。填充(
{
身份证号码：12345678，
categoryId:categoryId，
名称：“产品名称可能很长”，
img:“boat.jpg”，
价格：1111.11
})；//笨蛋
}
handleScroll（）{
返回（事件）=>{
让relativeScrollOffset=//将偏移量从0.0滚动到1.0
event.srcElement.scrollingElement.scrollTop/
（event.srcmelement.scrollingElement.scrollHeight-event.srcmelement.scrollingElement.clientHeight）；
如果（！this.state.isLoading&&！this.state.noMoreData&&relativeScrollOffset>=0.9）
这是模拟同步项（5）；
}
}
render（）{
返回(
{（this.state.items&&Array.isArray（this.state.items））&&this.state.items.map（（item，i）=>
)}
{this.state.isLoading&&
正在加载数据，请稍候。。。
}
);
}
}

我没有解决问题，只是为未加载的空元素设置了固定高度

我没有解决问题，只是为未加载的空元素设置了固定高度