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

Redux form initialize only once though form names are different all the times
Redux Form and Wrapped Component Losing Focus on First Change
Redux saga multiple api calls
Trigger onProperty of component
Issue with Redux and React Drag n Drop
Griddle v1 onRowClick not firing
React: Detect a variable's PropTypes
TypeError: Cannot read property 'props' of null in react
Is there a way to use radium styles for semantic-ui components in reactjs?
Convert between ES6 Classes React
Webpack dev server + React + Typescript wont inject assets after sources change
React-bootstrap : popup modal open when we click on login menu
Remove html attribute in production build
Why am I getting Failed prop type using react router and nested components
State bug - row component getting bad values from props if wait
Multi-line select component for react?

Categories

HOME
postgresql
javafx
algolia
file-upload
boxplot
okhttp3
pandoc
bitbucket
hiveql
localhost
msbi
css-selectors
angularjs-directive
aggregation-framework
qt4
token
ejb-3.0
ios-universal-links
apache-httpclient-4.x
digital
drush
logstash-configuration
saucelabs
opendaylight
hql
dompdf
multibinding
draw2d
glibc
ampscript
keystone
cherrypy
angular2-pipe
smali
ng-tags-input
ps
core-animation
workflow-foundation
multiple-inheritance
launchd
git-submodules
federated
paper-trail-gem
drawrect
snapkit
traitsui
restler
powerbi-embedded
repeat
outlook-2010
console.readline
azure-web-roles
jquery-ui-slider
peerjs
pexpect
wufoo
infovis
django-tables2
noise
dynamic-linking
fluent-nhibernate-mapping
htop
boost-regex
printer-control-language
suitesparse
apache-commons-cli
qt3d
dbi
hfp
patching
angularfire
system-integration
supervised-learning
pebble-js
salesforce-service-cloud
methodology
jquery-draggable
gnu-sort
imageicon
android-facebook
system.diagnostics
httpmodule
touch-typing
uiblureffect
javadb
register-allocation
step
switchpreference
cs193p
visual-studio-setup-proje
rda
azure-caching
email-headers
infor-eam
codio
ekevent
dylan
cab
proj4
latex-suite
http-compression
biztalk-deployment
rbm
django-tinymce
zepto
m3u
bindinglist
eeprom
digg
execjs
dongle
numerical-computing
expander
hotfix





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