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

how to get selected value onChange of react redux-form drop down
how should I build onClick action in my react component + Redux
Code after a dispatch() isn't being executed
Redux fetch is returning empty
Set state in child after it will receive props?
What are selectors in redux?
React-redux get site base URL / window.location
React devToolsExtension breaks the store
correct store structure when an action has child that needs to be retrieved with an action/api
react lifecycle when using redux
How to use the same route for multiple routes in react?
How do you add a list to another list in onsen-ui?
Axios not returning value
Getting false warning on 'unknown props' in react
threading route params with react-router and redux container components
Dynamic Hiccup templates in OM

Categories

HOME
actionscript-3
postgresql
ckan
youtube-api
url
qemu
microcontroller
c++builder
highmaps
jquery-plugins
nltk
itext7
esxi
docker-compose
autocad
comments
markdown
scapy
yacc
subprocess
runtime
angular-universal
xmlhttprequest
opendaylight
openstack-horizon
appsettings
reportlab
civicrm
keystone
matlab-gui
ckeditor4.x
android-xml
scalatest
datanucleus
rollupjs
formtastic
proof-general
angular-schema-form
emr
semantic-ui-react
apm
selenium3
overflow
log4net-configuration
oracle-nosql
zimbra
dom4j
ponylang
word-wrap
armadillo
office-interop
ui-grid
contenteditable
pexpect
wufoo
ionic2-select
e4
photoshop-script
aws-rds
sharpssh
programming-pearls
dynatable
suitesparse
qudpsocket
dbi
visual-web-developer
hoare-logic
android-xmlpullparser
user-profile
std
computability
gulp-cdnizer
roslyn-code-analysis
joomla3.3
accpac
mri
alpha-beta-pruning
kss
fxmlloader
apache-pivot
breeze-sharp
sat4j
azure-worker-roles
triplestore
lettuce
azure-caching
email-headers
connections
slimscroll
pthreads-win32
php-amqplib
aspnet-compiler
azure-pack
extensibility
kademlia
select2-rails
mysql2
servicemanager
rbm
dnsbl
feincms
volatility
cryptarithmetic-puzzle
zend-validate
httppostedfilebase
session-hijacking
digg
execjs
gmagick
lgpl
oaw
for-xml
pixel-bender
paperless

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