优化列表的onEndReached的调用
2023-03-12 本文已影响0人
SunnyLYummy
通过控制hasMore字段,优化onEndReached方法调用。
在onRefresh方法添加hasMore字段的修改,代码如下:
hasMore = false;//必须初始化为false
params = {
page: 1,//页数
limit: 20,//每页的条数
};
onRefresh = (refreshing = false) => {
this.params.page = 1;
this.setState({ refreshing });
this.getData();
};
getData = () => {
api_list(this.params).then((res) => {
this.setState({ refreshing: false });
const rows = res.list;
this.hasMore = this.params.page < res.totalPage;
let newData = rows;
const { list } = this.state;
if (this.params.page > 1) {
newData = list.concat(rows);
}
this.setState({ list: newData });
}).catch((error) => {
this.setState({ refreshing: false });
})
}
onEndReached方法:
onEndReached = () => {
if (this.hasMore) {
this.params.page += 1;
this.getData();
}
}
首次打开列表的时候,通过hasMore字段就能避免onEndReached方法重复调用。