使用react-virtualized和InfiniteLoader取消加载并且不加载行

Question

我用react-virtualized使我的react组件显示了我从服务器获得的很大列表。代码如下：

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import axios from 'axios';
import { List, AutoSizer, InfiniteLoader } from 'react-virtualized';
import 'react-virtualized/styles.css';

const ROW_COUNT = 100000;


class TableView extends Component {

  constructor(props) {
    super(props);

    this.state = {
      actualData: []
    };
  }

  componentDidMount() {
    // this.loadMoreRows({ startIndex: 0, stopIndex: 9 });
  }

  isRowLoaded = ({ index }) => {
    console.log('isRowLoaded', index);
    return !!this.state.actualData[index];
  }

  loadMoreRows = ({ startIndex, stopIndex }) => axios.get(`http://localhost:3000/catalog?startIndex=${startIndex}&stopIndex=${stopIndex}`)
    .then(resp => {
      // Store response data in list...
      console.log(resp.data);
      this.setState({ actualData: resp.data.data });
      // this.list = resp.data.data;
    })


  renderRow = ({ index, key, style }) => {
    const list = this.state.actualData;
    if (!list[index]) {
      return <div style={{ textAlign: 'center', height: '100px' }}> loading...</div>;
    }
    return (
    <div key={key} style={{ height: '100px' }} className="row">
        <div className="image">
          <img src={list[index] && list[index].image} alt="" />
        </div>
        <div className="content">
          <div>{list[index] && list[index].name}</div>
          <div>{list[index] && list[index].text}</div>
        </div>
    </div>);
  }

  render() {
    return (
        <div style={{ width: '100%', height: '100%' }}>
        <div style={{ height: 'calc(100vh - 90px)', width: '80%', margin: 'auto' }}>
        <InfiniteLoader
          isRowLoaded={this.isRowLoaded}
          loadMoreRows={this.loadMoreRows}
          rowCount={ROW_COUNT}>
          {({ onRowsRendered, registerChild }) => (
            <AutoSizer disableHeight>
                {
                  ({ width, height }) => (
                    <List
                      width={width}
                      height={height}
                      ref={registerChild}
                      /* className={styles.List} */
                      onRowsRendered={onRowsRendered}
                      rowCount={ROW_COUNT}
                      rowHeight={100}
                      overscanRowsCount={30}
                      rowRenderer={this.renderRow} />
                   )
                }
            </AutoSizer>
          )
         }
        </InfiniteLoader>
        </div>
        </div>
    );
  }
}


function mapDispatchToProps(dispatch) {
  let actions = {};
  return bindActionCreators(actions, dispatch);
}

export default connect(null, mapDispatchToProps)(TableView);

服务器提供的id为0到100000的模拟对象，我将在行中显示。当向下滚动行时，这种行为确实很奇怪，这会开始闪烁并一次又一次地从服务器获取相同的索引。如果向上滚动，则只能滚动到9-12 id，但是应该滚动到0，所以缺少一些初始行。我已经阅读了所有文档，但是不知道我错过了什么。预先感谢！