如何解决Laravel Pagination加载评论时的重复数据问题？

阿华AIGC实验室

2026-5-19

解决Laravel分页+Axios加载评论重复的问题

嘿，这个问题我做评论系统的时候也踩过一模一样的坑！咱们先把根源理清楚，再给你几个靠谱的解决方案：

问题本质

你用的是Laravel默认的偏移量分页（Offset Pagination），它靠offset和limit来截取数据。比如第一次取最新10条是offset=0, limit=10，第二次加载下一页就是offset=10, limit=10。但当你新增一条评论后，数据库里的评论按created_at降序排列时，新评论会顶到最前面——原来的第1-10条评论，瞬间变成了第2-11条。这时候再请求offset=10的话，拿到的第一条就是原来列表的最后一条，自然就出现重复了。

至于你试的includes()方法没用，是因为它比较的是对象引用，而不是评论的唯一标识（比如id）。哪怕两条评论内容完全一样，它们是不同的对象实例，includes()也会判定为不同项，所以去重失败。

解决方案

1. 用游标分页（Cursor Pagination）彻底解决（推荐）

Laravel从5.5版本开始支持游标分页，它不靠offset，而是基于唯一排序字段（比如id+created_at）定位下一页的起点。新增数据后，完全不会影响后续的分页查询，完美解决重复问题。

后端代码修改：

// 原来的偏移量分页
// $comments = Comment::orderBy('created_at', 'desc')->paginate(10);

// 改成游标分页
$comments = Comment::orderBy('created_at', 'desc')->cursorPaginate(10);

前端Axios请求修改：

// 第一次加载第一页，保存下一页的游标
axios.get('/comments').then(res => {
    window.nextCursor = res.data.next_cursor;
    // 渲染初始评论列表
    renderComments(res.data.data);
});

// 加载更多时，带上游标参数
function loadMoreComments() {
    if (!window.nextCursor) return;
    
    axios.get('/comments', { params: { cursor: window.nextCursor } }).then(res => {
        window.nextCursor = res.data.next_cursor;
        // 直接追加新评论，不会有重复
        renderComments(res.data.data, true); // 第二个参数表示追加而非替换
    });
}

2. 前端手动去重（临时过渡方案）

如果暂时不想改后端分页逻辑，可以在前端拿到新评论后，通过id过滤掉已存在的评论：

// 假设现有评论列表是commentsList，新加载的评论是newComments
const uniqueNewComments = newComments.filter(newComment => {
    // 检查现有列表里有没有相同id的评论
    return !commentsList.some(comment => comment.id === newComment.id);
});

// 把去重后的评论追加到列表
commentsList.push(...uniqueNewComments);