react-infinite-scroller doesn't load the right amout of items

Question

I am trying to implement infinite loading but the calls either stop before the desired number was achieved or go way above it

This is my sample code:

import React, {Component} from 'react'
import axios from 'axios'
import InfiniteScroll from 'react-infinite-scroller'
import '../../../style/css/browser/foldercontent.css'
import * as CONSTANTS from '../../../utils/settings'
import { connect } from 'react-redux'
import * as BROWSER from '../../../redux/actions/user/Browser'

class Preview extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedNumber:1,
            doc:this.props.document,
            selectedVersion:this.props.selectedVersion,            
            baseLink:`${CONSTANTS.url}/files/preview/${this.props.document.versions[this.props.selectedVersion-1].id}/`,
            maxNumber:this.props.document.versions[this.props.selectedVersion-1].preview_files_no,
            infiniteIsLoading:false,
            items:[],
            hasMore:true,
        }
        this.loadMore = this.loadMore.bind(this)
    }

componentWillReceiveProps(nextProps) {
    let vs = nextProps.selectedVersion;
    let item = nextProps.document
    if (item &&
        vs &&
        this.state.doc !== item) {
        this.setState({
            selectedVersion: vs,
            doc: item,
            maxNumber: item.versions[vs - 1].preview_files_no,
            selectedNumber: 1,
            baseLink: `${CONSTANTS.url}/files/preview/${item.versions[vs-1].id}/`,
            items: []
        })
    }
}

loadMore(p) {
    console.log('hasmore is', this.state.hasMore)
    this.state.hasMore &&
        setTimeout(function() {
            let newItems = this.state.items.concat([this.getImages(p)]);
            console.log(newItems);
            this.setState({
                items: newItems,
                hasMore: (p < this.state.maxNumber)
            });
            console.log(p, this.state.hasMore, this.state.maxNumber)
        }.bind(this), CONSTANTS.infiniteTimeout);
}


getImages(i) {
    return <ul > < img className = "preview-image"
    width = "400"
    src = {
        this.state.baseLink + i
    }
    /></ul >
}

render() {
    return ( <
        div >
        <
        div className = "scroll-preview-image-container" >
        <
        InfiniteScroll pageStart = {
            0
        }
        element = "ul"
        loadMore = {
            this.loadMore
        }
        hasMore = {
            this.state.hasMore
        }
        loader = { < div className = "loader"
            key = {
                0
            } > Loading... < /div>}
            threshold = {
                500
            } >
            {
                this.state.items
            } <
            /InfiniteScroll> <
            /div> <
            /div>
        )
    }


}


function mapStateToProps(state) {
    return {
        language: state.language,
        browser: state.browser,
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        loadPreviewFiles: id => dispatch(BROWSER.loadPreviewFiles(id)),
        dispatch
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Preview)

The console.log output for a maxNumber of 10 is :

hasmore is true
1 true 10
(2) [{…}, {…}]
hasmore is true
2 true 10
hasmore is true
(3) [{…}, {…}, {…}]
hasmore is true
3 true 10
(4) [{…}, {…}, {…}, {…}]
4 true 10
(5) [{…}, {…}, {…}, {…}, {…}]
5 true 10
(6) [{…}, {…}, {…}, {…}, {…}, {…}]
6 true 10

so it doesn't go all the way, and for a maxNumber of 2 is :

hasmore is true
1 true 2
(2) [{…}, {…}]
2 false 2
(3) [{…}, {…}, {…}]
3 false 2

so it goes above.

It seems like it doesn't matter if hasMore is true or false. Can you help me?

Answer 1

Fixed it! Just had to add useWindow={false} at InfiniteScroll