uni-app unicloud-db 加载分页时数据重复且丢失后续页面数据

uni-app unicloud-db 加载分页时数据重复且丢失后续页面数据

产品分类：

uniCloud/腾讯云

示例代码：

<unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}" @error="onqueryerror" :collection="colList"  :page-size="10" getcount="true" @load="afterDBload" loadtime="onready"  :groupby="groupby"  :group-field="groupField" orderby="indexList desc" >
<uni-pagination show-icon :page-size="pagination.size" :total="pagination.count" @change="onpagination" />
<!-- 列表 -->
<uv-index-list :indexList="indexList"  customNavHeight="100rpx">
<text>省略</text>
</uv-index-list>  
</unicloud-db>
<script>
data() {
return {
where: '"article_status" == 1',
groupby:'dateToString(add(new Date(0),start_time),"%Y-%m-%d","+0800") as indexList',
groupField:"push({_id: _id, article_status:article_status,open_status:open_status,content:content,content1:content1,content2:content2,action_id:action_id,start_time:start_time,end_time:end_time,duration:duration,view_count:view_count,like_count:like_count,fav_count:fav_count,comment_count:comment_count,is_essence:is_essence}) as itemArr",
indexList:[],
itemArr:[],
}
methods：{
loadMore() {
console.log("loadMore called");
cdbRef.loadMore()
},
}
// #ifndef APP-NVUE
onPullDownRefresh() {
this.refresh()
},
onReachBottom() {
console.log("onReachBottom called");
this.loadMore()
}
// #endif
</script>

操作步骤：

使用分页方式读取数据，每次10条，显示第一页时，用<uni-pagination>组件看有五页（不分页有48条数据），结果列表拉到底时，触发调用unicloud-db的loadmore()方法，读取的数据跟前10条一模一样，而且还把 hasmore标志改为false了，再也触发不了loadmore了。

改where语句，把查询的范围缩小到用户自己，发布到手机上运行，发现有时候可以更新分页数据了，但是每次更新的条数有时候多，有时候少，还是后台有点问题。

预期结果：

希望正常分页

实际结果：

使用分页方式读取数据，每次10条，显示第一页时，用<uni-pagination>组件看有五页（不分页有48条数据），结果列表拉到底时，触发调用unicloud-db的loadmore()方法，读取的数据跟前10条一模一样，而且还把 hasmore标志改为false了，再也触发不了loadmore了。

改where语句，把查询的范围缩小到用户自己，发布到手机上运行，发现有时候可以更新分页数据了，但是每次更新的条数有时候多，有时候少，还是后台有点问题。


更多关于uni-app unicloud-db 加载分页时数据重复且丢失后续页面数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

是因为这个查询语句太复杂了吗？

更多关于uni-app unicloud-db 加载分页时数据重复且丢失后续页面数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 的 unicloud-db 组件进行分页加载时，如果遇到数据重复或丢失后续页面数据的问题，可能是由于以下几个原因导致的。下面是一些常见的排查和解决方法：

1. 检查分页参数

确保你在请求分页数据时，正确地传递了分页参数（如 page 和 pageSize）。常见的错误是在每次加载时没有正确更新 page 参数，导致重复请求同一页数据。

data() {
  return {
    page: 1,
    pageSize: 10,
    list: []
  };
},
methods: {
  loadMore() {
    this.page++;
    this.unicloudDb.load();
  },
  onLoadComplete(e) {
    if (e.detail.data.length > 0) {
      this.list = this.list.concat(e.detail.data);
    } else {
      // 没有更多数据了
      uni.showToast({ title: '没有更多数据了', icon: 'none' });
    }
  }
}

2. 检查 unicloud-db 组件的 where 条件

如果 where 条件在某些情况下发生了变化，可能会导致查询结果不一致。确保 where 条件在分页加载时是稳定的。

<unicloud-db ref="unicloudDb" :where="where" :page="page" :pageSize="pageSize" @load="onLoadComplete">
  <!-- 数据渲染 -->
</unicloud-db>

3. 检查数据合并逻辑

在每次加载新数据时，确保将新数据正确地合并到现有数据中。常见的错误是直接覆盖旧数据，而不是追加新数据。

onLoadComplete(e) {
  if (e.detail.data.length > 0) {
    this.list = this.list.concat(e.detail.data); // 正确：追加新数据
  } else {
    uni.showToast({ title: '没有更多数据了', icon: 'none' });
  }
}

4. 检查后端逻辑

如果问题依然存在，可能是后端逻辑有问题。确保后端在处理分页请求时，正确地根据 page 和 pageSize 返回相应的数据。

5. 使用 orderBy 确保数据顺序

如果数据没有按照特定的顺序返回，可能会导致分页时数据重复或丢失。使用 orderBy 确保数据按照特定的顺序返回。

<unicloud-db ref="unicloudDb" :where="where" :page="page" :pageSize="pageSize" orderBy="createTime desc" @load="onLoadComplete">
  <!-- 数据渲染 -->
</unicloud-db>

6. 检查 unicloud-db 的 ref 和 load 方法

确保在每次加载更多数据时，正确地调用了 unicloud-db 的 load 方法。如果 ref 没有正确设置，可能会导致无法加载新数据。

methods: {
  loadMore() {
    this.page++;
    this.$refs.unicloudDb.load(); // 确保正确调用 load 方法
  }
}

7. 检查网络请求

有时网络请求可能会失败或超时，导致数据加载不完整。可以添加重试机制或错误处理来应对这种情况。

onLoadComplete(e) {
  if (e.detail.data.length > 0) {
    this.list = this.list.concat(e.detail.data);
  } else {
    uni.showToast({ title: '没有更多数据了', icon: 'none' });
  }
},
onLoadError(e) {
  uni.showToast({ title: '加载失败，请重试', icon: 'none' });
  // 可以在这里添加重试逻辑
}

8. 检查数据去重

如果数据重复，可以在前端对数据进行去重处理。例如，使用 Set 或 filter 方法去除重复数据。

onLoadComplete(e) {
  if (e.detail.data.length > 0) {
    const newData = e.detail.data.filter(item => !this.list.some(existingItem => existingItem._id === item._id));
    this.list = this.list.concat(newData);
  } else {
    uni.showToast({ title: '没有更多数据了', icon: 'none' });
  }
}
回到顶部