Question

我使用的是React-Virtualizer，看起来加载行的初始调用的startIndex为0，stopIndex为0.如果数组已有一些项，则startIndex为数组长度，和stopIndex是相同的数组长度。我不确定为什么会这样，但显然这是一个问题。

您可以在此处看到可重复的示例：

https://plnkr.co/edit/TP5BTGNA0Me1Rz7Q7Ge9?p=preview

这是JSX文件：

var List = ReactVirtualized.List;
var InfiniteLoader = ReactVirtualized.InfiniteLoader;
var AutoSizer = ReactVirtualized.AutoSizer;
var CellMeasurer = ReactVirtualized.CellMeasurer;
var CellMeasurerCache = ReactVirtualized.CellMeasurerCache;

// Define a component:
var Main = React.createClass({
  getInitialState: function() {
    return {
      hasNextPage: true,
      nextPageLoading: false,
      totalCount: 100,
    }
  },
  loadNextPage: function({startIndex, stopIndex}) {
    console.log(startIndex, stopIndex) // THIS ISN'T RIGHT?
  },
  render: function() {
      const rows = []
      const rowsCount = this.state.hasNextPage ? rows.length + 1 : rows.length

      // Only load 1 page of items at a time.
      // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.
      const loadMoreRows = this.state.nextPageLoading ? () => {} : this.loadNextPage

      // Every row is loaded except for our loading indicator row.
      const isRowLoaded = ({ index }) => !this.state.hasNextPage || index < rows.length

      // Render a list item or a loading indicator.
      const rowRenderer = ({ index, key, style }) => {
        if (!isRowLoaded({ index })) {
          console.log("LOADING")
          return(
            <div style={style}>
              Loading...
            </div>
          )
        } else {
          console.log(rows[index])
          return(
            <div style={style}>
              {rows[index]}
            </div>
          )
        }
      }

      console.log(rows) // SHOWS THE ARRAY
      return(
        <InfiniteLoader
          isRowLoaded={isRowLoaded}
          loadMoreRows={loadMoreRows}
          rowCount={rowsCount}>
          {({ onRowsRendered, registerChild }) => (
            <div style={{height: 300}}>
              <AutoSizer>
                {({ height, width }) => (
                  <List
                    height={height}
                    width={width}
                    ref={registerChild}
                    onRowsRendered={onRowsRendered}
                    rowCount={this.state.totalCount}
                    rowHeight={46}
                    rowRenderer={rowRenderer}
                  />
                )}
              </AutoSizer>
            </div>
          )}
        </InfiniteLoader>
      );
  }
});


// Render your list
ReactDOM.render(
    <Main />, // What to render (an instance of the Main component)
  document.getElementById('example')
);

Answer 1

这是因为rowCount被设置为当前长度而不是加载所有数据后的总长度。将其设置为服务器修改总列表大小。

React-Virtualizer InfiniteLoader startIndex和stopIndex是相同的值

1 个答案: