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

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設置爲當前長度，而不是總計數據加載完畢。將其設置爲來自服務器的總列表大小修復了它。