我正在尝试实现无限加载，但调用要么在达到所需数量之前停止，要么超过它
这是我的示例代码：
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 为 10 的 console.log 输出为：
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
所以它不会一路走好，对于 2 的 maxNumber 是：
hasmore is true
1 true 2
(2) [{…}, {…}]
2 false 2
(3) [{…}, {…}, {…}]
3 false 2
所以它在上面。
似乎 hasMore 是真还是假都没有关系。你能帮助我吗？