reactjs


React-Virtualizer InfiniteLoader startIndex and stopIndex are the same value


I'm using React-Virtualizer, and it seems as if the initial call to load rows has a startIndex of 0 and stopIndex of 0. If the array already has some items, then the startIndex is the array length, and the stopIndex is the same array length. I'm not sure why this is happening, but obviously it's a problem.
You can see a reproducible example here:
https://plnkr.co/edit/TP5BTGNA0Me1Rz7Q7Ge9?p=preview
And here's the JSX file:
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')
);
This wound up being because the rowCount was set to the current length rather than the total that it would be after all data was loaded. Setting it to the total list size from the server fixed it.

Related Links

React native: callback error in native module
how change state of several elements after click on button with React.js
React 0.13 this.getDOMNode() equivalent to React.findDOMNode()
Using Masonry with ReactJS in browser
Getting DOM node from React child element
Babelify omit file extension on import
ReactJS: Control a child state from the child and the parent
What are these grey lines in the Chrome sources panel?
How to position and resize React Bootstrap Tooltip before displaying it on the DOM?
ES6 features in React Native
Error: Invariant Violation: dangerouslyRenderMarkup(…): Cannot render markup in a worker thread
Component not being unmounted
ReactJS: “this.props” is not a function when child component calls parent
Cannot require a React.js component
React.js way to emulate handlebars condition statements
How to work with martyjs container?

Categories

HOME
asterisk
pact
gsm
pelican
python-requests
postsharp
skypedeveloper
conceptual
watson-iot
singleton
coordinates
xss
perl6
swap
symfony-3.2
token
google-app-maker
runtime
xmlhttprequest
minimum
appsettings
web-worker
multibinding
game-engine
facebook-marketing-api
simd
smooth-scrolling
alert
project-reactor
include-path
windowserror
chartist.js
oracle10g
typeorm
sqldependency
keil
imdb
voyager
ansible-inventory
cache-control
flex3
repeat
kofax
outlook-2010
abide
framebuffer
cowboy
azure-web-roles
ocamlbuild
qtwebkit
monaca
dynamic-linking
bioperl
nservicebus6
printer-control-language
rmq
gevent
boost-range
hfp
sbt-proguard
pebble-js
pyshark
radar-chart
sqlxml
alchemy
apache2-module
maven-antrun-plugin
vanilla-forums
autoscaling
vspackage
esb-toolkit-2.1
valdr-bean-validation
firebase-tools
wingdb
fedena
famous-engine
nsnotificationcenter
rails-migrations
telerik-appbuilder
power-management
cvi
xtify
mobile-robots
caroufredsel
xrandr
android-library
select2-rails
exi
gpl
qt5.1
big-endian
ios6-maps
backlight
symfony-1.2
file-processing
lgpl
s60
p4.net
system-analysis
glassfish-embedded
web-widget
authkit

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App