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