无限滚动的Mobx反应无法正确获取

如何解决无限滚动的Mobx反应无法正确获取

我在元素底部向下滚动后尝试获取数据。当我滚动时这部分正在工作，但是行为不正确。提取时，数据会渲染很多次，而且顺序也不正确。在滚动之前看起来还不错。它不应该那样做。我正在使用MobX。

问题一定是由于某种原因引起的：

componentDidMount() {
const { listData } = this.props;
const { data = [] } = listData;
const rowData = [...data].reverse();

this.ref.current.addEventListener('scroll',this.handleScroll,false);
this.handleScroll();

reaction(
  () => rowData,() => this.handleScroll()
); }

渲染如下：

render() {
    const { listData } = this.props;
    const { data = [] } = listData;
    const rowData = [...data].reverse();

    return (
      <>
        <div className="container" ref={this.ref}>
          <ul className="list">
            {_.map(rowData,(item,index) => (
              <li
                className="some-list"
                key={index}
              >
                <div className="item-wrapper">
                  <div className="item">
                    <div className="item-name">
                      List {item.number}
                    </div>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </>

手柄滚动的代码：

  handleScroll() {
    const { listData } = this.props;
    const { paging = [] } = listData;

    const contentHolder = this.ref.current;
    const margin = 100;
    const scrollY = contentHolder.scrollTop;
    const wrapperHeight = contentHolder.offsetHeight;

    const list = contentHolder.querySelector('.container');

    if (wrapperHeight + scrollY >= list.offsetHeight - margin) {
      this.handleRecieveFetch(paging.next);
    }
  }

代码在同一组件中。你有什么想法我做错了吗？