React-virtualized InfiniteLoader不會渲染任何內容

Question

正如標題所示，InfiniteLoader不會渲染任何項目。我看起來已經正確設置了一切，並且該集合中有很多要呈現的項目，但是頁面上沒有顯示任何內容。這裏的渲染方法：

render() { 
    const rows = this.state.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") // NEVER GETS CALLED 
     return(
      <div style={style}> 
      Loading... 
      </div> 
     ) 
     } else { 
     console.log(rows[index]) // NEVER GETS CALLED 
     return(
      <MyRow key={index} 
      row={rows[index]} /> 
     ) 
     } 
    } 

    console.log(rows) // SHOWS AN ARRAY WITH PLENTY OF ROWS 
    return(
     <InfiniteLoader 
     isRowLoaded={isRowLoaded} 
     loadMoreRows={loadMoreRows} 
     rowCount={rowsCount}> 
     {({ onRowsRendered, registerChild }) => (
      <AutoSizer> 
      {({ height, width }) => (
       <List 
       height={height} 
       width={width} 
       ref={registerChild} 
       onRowsRendered={onRowsRendered} 
       rowCount={this.state.totalCount} 
       rowHeight={46} 
       rowRenderer={rowRenderer} 
       /> 
      )} 
      </AutoSizer> 
     )} 
     </InfiniteLoader> 
    ); 
    } 

Answer 1

這與AUTOSIZER爲0。通過與一組高度一個div包裹AUTOSIZER解決高度的問題。