1

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')
);
4

1 に答える 1