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 的问题。通过将 AutoSizer 包装在具有设定高度的 div 中解决。