Javascript react无限滚动条不';t装载正确数量的项目

Javascript react无限滚动条不';t装载正确数量的项目,javascript,reactjs,infinite-scroll,react-infinite,Javascript,Reactjs,Infinite Scroll,React Infinite,我试图实现无限加载,但调用要么在达到所需的数字之前停止,要么远远超过它 这是我的示例代码: 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 '../.

我试图实现无限加载,但调用要么在达到所需的数字之前停止,要么远远超过它

这是我的示例代码:

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)
所以它不会一直走下去,对于maxNumber为2的情况:

hasmore is true
1 true 2
(2) [{…}, {…}]
2 false 2
(3) [{…}, {…}, {…}]
3 false 2
所以它在上面


哈斯莫尔是真是假似乎无关紧要。你能帮我吗?

修好了!只需在
InfiniteScroll

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