只能让React-Virtualized InfiniteLoader加载第一行

Question

我已经在这上面停留了一段时间。我试图模仿文档中的[remote loader example] [1]，但我只能加载第一行。就像在那之后，列表没有更新。除了rowRenderer中的所有值外，我还注销了startIndex和stopIndex。是什么导致仅前16个项目加载？ （然后在下面的空白处

class LocationsGrid extends React.Component {
  state = {
    data: [],
    loading: false
  };

  loadedRowsMap = {};

  isRowLoaded = ({ index }) => {
    return !!this.loadedRowsMap[index];
  };

  loadMoreRows = ({ startIndex, stopIndex }) => {

    let { data } = this.state;
    const newState = [];

    for (let i = startIndex; i <= stopIndex; i += 1) {
      this.loadedRowsMap[i] = 1;

      let location = this.props.locations[i];
      newState.push(location);
    }

    this.setState({
      data: newState
    });
  };


  render() {
    const { locations, classes } = this.props;


    return (
      <div className={classes.root}>
        <div style={{ display: "inline" }}>
          <SubtitleSection />
        </div>

        <InfiniteLoader
          isRowLoaded={this.isRowLoaded}
          loadMoreRows={this.loadMoreRows}
          rowCount={locations.length}
        >
          {({ onRowsRendered, registerChild }) => (
            <AutoSizer>
              {({ height, width }) => {
                const itemsPerRow = Math.floor((width - 20) / CARD_WIDTH) || 1;
                const rowCount = Math.ceil(locations.length / itemsPerRow);

                return (
                  <div>
                    <List
                      width={width}
                      height={height}
                      ref={registerChild}
                      onRowsRendered={onRowsRendered}
                      rowCount={rowCount}
                      rowHeight={CARD_WIDTH + 20}
                      rowRenderer={({ index, key, style }) => {
                        const items = [];

                        const fromIndex = index * itemsPerRow;

                        const toIndex = Math.min(
                          fromIndex + itemsPerRow,
                          locations.length
                        );

                        for (let i = fromIndex; i < toIndex; i++) {
                          let location = this.state.data[i];

                          items.push(
                            <div className={classes.Item} key={i}>
                              <LocationCard location={location} />
                            </div>
                          );
                        }



                        return (
                          <div className={classes.Row} key={key} style={style}>
                            {items}
                          </div>
                        );
                      }}
                    />
                  </div>
                );
              }}
            </AutoSizer>
          )}
        </InfiniteLoader>
      </div>
    );
  }
}




  [1]: https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#examples