使用react-virtualized InfiniteLoader

Question

react-virtualized的InfiniteLoader需要種子數據才能正常工作嗎？以下是我的組件：

class Bookmarks extends PureComponent { 
    constructor(props) { 
     super(props); 

     this.loaded = { 
      cursor: null, 
      data: [] 
     }; 

     this._isRowLoaded = this._isRowLoaded.bind(this); 
     this._loadMoreRows = this._loadMoreRows.bind(this); 
     this._rowRenderer = this._rowRenderer.bind(this); 
    } 

    render() { 
     const size = this.loaded.data.length; 

     return (
      <InfiniteLoader 
       isRowLoaded={this._isRowLoaded} 
       loadMoreRows={this._loadMoreRows} 
       rowCount={size}> 
       {({onRowsRendered, registerChild}) => 
        <AutoSizer> 
         {({width, height}) => 
          <List 
           ref={registerChild} 
           height={height} 
           onRowsRendered={onRowsRendered} 
           rowCount={size} 
           rowHeight={30} 
           rowRenderer={this._rowRenderer} 
           width={width} 
          />} 
        </AutoSizer>} 
      </InfiniteLoader> 
     ); 
    } 

    _isRowLoaded({index}) { 
     return !!this.loaded.data[index]; 
    } 

    _loadMoreRows({startIndex, stopIndex}) { 
     fetch('/api/bookmarks').then((response) => { 
      return response.json(); 
     }).then((json) => { 
      this.loaded = { 
       cursor: json.cursor, 
       data: this.loaded.data.push(...json.data), 
      }; 
     }); 
    } 

    _rowRenderer({index, key, style}) { 
     return (
      <div key={key} style={style}>{this.loaded.data[index]}</div> 
     ); 
    } 
} 

在render()，size最初是零，因爲沒有數據着呢，我假設組件將調用_loadMoreRows -apparently沒有。

這是我認爲是邏輯的流程（這是不正確的）：創建

1. 組件
2. _loadMoreRows被稱爲（第一時間）
3. 當_loadMoreRows返回的承諾是解決了，檢查每個裝載的行與_isRowLoaded
4. 渲染每一行

Answer 1

在render()，size最初是零，因爲沒有數據着呢，我假設組件將調用_loadMoreRows

這是關鍵的誤解。 InfiniteLoader需要知道是否有更多數據到潛在的負載。該文檔有幾個簡單的食譜與InfiniteLoader工作：

• 如果你知道遠程記錄總數再看看this example。
• 如果您只知道是否至少還有1條記錄/頁面需要加載，請致電 查看this example。