我尝试实现react-infinite-scroll,它应该首次渲染10个元素,然后在滚动时它应该加载更多元素,这是我的代码
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import InfiniteScroll from 'react-infinite-scroller';
var App=React.createClass({
getInitialState(){
var a=[];
for(var i=0;i<300;i++){
a.push(i);
}
return ({ data:a,entry:[],hasMoreItems: true,start:1,end:50 })
},
loadItems: function(page) {
this.setState({entry:this.state.data.slice(this.state.start,this.state.end)});
console.log("entry state",this.state.entry);
if(this.state.data.length==this.state.end){
this.setState({hasMoreItems:false})
}
this.setState({start:this.state.start+50});
this.setState({end:this.state.end+50});
},
render(){
var items = [];
this.state.entry.map((track, i) => {
items.push(
<div className="track" key={i}>
<div key={i}>HI {i}</div>
</div>
);
});
console.log("items",items)
return(
<InfiniteScroll
pageStart={0}
loadMore={this.loadItems}
hasMore={this.state.hasMoreItems}
loader={<div className="loader">Loading ...</div>}
>
<div>
{items}
</div>
</InfiniteScroll>
)
}
});
ReactDOM.render(
<App />
, document.getElementById('root'));
滚动时条目状态正在改变,但组件不再渲染它只显示前50个数据。
请帮助