실제 가상화 된 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

이것은 설정된 높이로 DIV AutoSizer에 배치함으로써 해결 AutoSizer가 0 인 높이의 문제였다 여기 렌더링 방법이다.