美文网首页
优化列表的onEndReached的调用

优化列表的onEndReached的调用

作者: SunnyLYummy | 来源:发表于2023-03-12 18:49 被阅读0次

通过控制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方法重复调用。

相关文章

网友评论

      本文标题:优化列表的onEndReached的调用

      本文链接:https://www.haomeiwen.com/subject/sslqrdtx.html