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