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 component appears and disappears instantly
React rebuild tree with HOC components (causing input field focus loss)
using css-module with react?
Setting state when react router renders a new component
Import npm modules in client side React components
Argument of type 'typeof -' is not assignable to parameter of type ComponentClass error
React components make inheritance through Compositon
Render React Component from Backbone
add comment jsx logic
React function passed to child through props is undefined
render multiple components with enzyme shallow
React app doesn't serve image assets on production
Who is supposed to pass 'handleSubmit'
React - Display loading screen while DOM is rendering?
React Synthetic Events Bubble Capture with Components
rollup js configuration - globals?

Categories

HOME
autohotkey
youtube-api
indexing
algolia
macros
botframework
intellij-idea
network-programming
openacc
webvr
file-upload
blob
spss
ubuntu-14.04
uml-designer
multipartform-data
docker-compose
aggregate-functions
kohana
gnuradio
markdown
scapy
coding-style
mongoimport
kairosdb
distinct
ng2-charts
hdf5
bookmarklet
civicrm
beacon
gpo
url-parameters
formulas
android-wear-2.0
jira-zephyr
git-submodules
xlib
wordpress-rest-api
matlab-compiler
pyenv
cache-control
sdl-2
strategy-pattern
nscollectionview
file-conversion
mixed-models
aspnetboilerplate
contenteditable
binary-decision-diagram
qt-quick
niagara-ax
line-endings
automapper-4
easyquery
emacs24
google-cloud-shell
multivalue
vertex
htop
petapoco
nls
therubyracer
sharing
distcc
easy68k
normalisation
jmap
cexception
code-translation
trendline
instabug
videoview
wonderware
web-performance
app-data
gulp-cdnizer
random-sample
php-gd
redquerybuilder
dnvm
android-filterable
optimistic-locking
shunting-yard
fiware-health
drools-guvnor
zoneminder
gnip
powershell-v1.0
disparity-mapping
time-frequency
behance-api
banana-pi
sigma-grid-control
.net-reflector
db2-connect
vbaccelerator
nop
infomaker
nokogiri
oc4j
qmainwindow
junction-table
cloudmade
invalidoperationexception
google-email-audit-api
bash4
visual-leak-detector
capitalization
mismatch
file-processing
method-call
auto-compile
quazip
norton
linq-to-mysql
web-widget

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