[React]列表页下滑加载，每次刷新请求会多次发起

商品类项目中经常会需要实现下滑加载的功能。

页面实现下滑加载更多，原意是想用useEffect依赖page数据，每次下滑时触发loadMore函数，在函数中更新page的状态，继而实现下滑加载。

但是发现第一次加载页面、每次刷新页面都会发起很多次请求(拉取列表数据的请求)，更是在下滑到底时，会一次性发起很多的请求，页面就会显示第10页的数据(页数限制到了10)。

原因：

原来loadMore函数会在一开始的时候会执行一次，这时就会更新page状态，继而触发useEffect函数，因为useEffect中还写了请求，所以就会连携触发导致一系列的问题。

解决：

直接删除useEffect函数，在loadMore中更新page，调用获取列表的函数(将请求封装起来)

主要实现过程：

1.将列表请求封装,如

const getList = () => {
  请求...
}

2.下滑底部时触发的函数loadMore

const loadMore = async () => {
  // 更新page
  setPage(page+1)
  // 获取列表数据
  getList()
  // 对页数做限制 - 暂时写死
  setHasMore(page < 10)
}

就完事了，连useEffect的Mounted形式都不需要写，因为前面说了loadMore会执行一次，这里使用了组件库。手写下滑加载代码的话，就获取卷曲值做判断即可。