我使用react infinite scroll component作为我的项目,由于某种原因,它在第一次滚动后无法正常工作。
首次尝试在内部调用API' componentDidMount()'在API调用InfiniteScroll
之后。
constructor(props) {
super(props);
this.state = {
history : {
'campaign_id': '',
'bid_filter': '',
"msisdn": localStorage.getItem("mobile"),
"offset": 0
},
offset:0,
hasMore: true,
}
componentDidMount(){
this.props.dataList(this.state.history); //API
}
history
是我想通过网络服务发送的数据集。第一次我在构造函数中发送history
。滚动后我更新{{1在} history.offset and state.offset
内部并调用API。
fetchMoreData()
在操作文件中,我检查当前偏移量和先前数据集的连接响应数据集,并将其分配给组件。
fetchMoreData = () => {
const { games } = this.props;
this.setState(prevState => ({
history: {
...prevState.history,
offset: this.state.offset + LIMIT
}
}));
this.setState({ offset: this.state.history.offset})
this.props.dataList(this.state.history); //API
}
<InfiniteScroll
dataLength={games.data.count}
next={this.fetchMoreData.bind(this)}
hasMore={true}
loader={<p className="loading-txt">Loading...</p>}
>
<Table hover>
<thead>
<tr>
<th>{STRING.VALUE}</th>
<th>{STRING.TIME}</th>
</tr>
</thead>
<tbody>
{this.gameBody()}
</tbody>
</Table>
</InfiniteScroll>