Laravel 9子评论无限滚动实现问题求助

安全阿岳

2026-8-4

Laravel 9 子评论无限滚动实现方案

问题分析

你当前的代码存在几个核心问题：

loadSubData 中不必要地查询所有父评论，逻辑完全偏离了「针对单个父评论加载子评论」的需求
子评论的分页参数（cursor、hasMore）是全局变量，无法区分不同父评论的滚动状态
全局的 subComments 集合会导致不同父评论的子评论混在一起，无法正确对应渲染
性能问题：单独查询 User 会引发N+1数据库查询

修复后的完整实现

1. 组件属性调整

移除全局子评论相关变量，改用数组存储每个父评论的独立分页状态：

public $link;
public $campaignId;
public $campaign;
public $comments = new Collection();
public $nextCursor;
public $hasMorePages = true;

// 每个父评论的子评论独立状态：[父评论ID => ['items' => 子评论集合, 'nextCursor' => 分页游标, 'hasMore' => 是否有更多, 'perPage' => 每页数量]]
public $subCommentsState = [];

2. 初始化方法（mount）

保持原有逻辑，无需全局子评论集合初始化：

public function mount($link)
{
    $this->link = $link;
    $campaign = Campaign::where('status', 1)->where('link', $this->link)->first();

    if ($campaign) {
        $this->campaignId = $campaign->id;
        $this->campaign = $campaign;
        $this->loadFirst();
    }
}

3. 子评论加载方法（重写loadSubData）

专门针对单个父评论处理子评论分页：

public function loadSubData($parentCommentId)
{
    // 初始化当前父评论的子评论状态（首次加载时创建）
    if (!isset($this->subCommentsState[$parentCommentId])) {
        $this->subCommentsState[$parentCommentId] = [
            'items' => new Collection(),
            'nextCursor' => null,
            'hasMore' => true,
            'perPage' => 3,
        ];
    }

    $state = &$this->subCommentsState[$parentCommentId];

    // 没有更多数据时直接返回
    if (!$state['hasMore']) {
        return;
    }

    // 预加载用户，避免N+1查询（需确保SubComment模型定义了user关联）
    $subCommentsQuery = SubComment::orderBy('id', 'desc')
        ->where('parent_comment_id', $parentCommentId)
        ->with('user');

    // 游标分页查询
    $subComments = $subCommentsQuery->cursorPaginate(
        $state['perPage'],
        ['*'],
        'cursor',
        $state['nextCursor'] ? Cursor::fromEncoded($state['nextCursor']) : null
    );

    // 转换子评论数据格式
    $transformed = $subComments->getCollection()->transform(function ($subComment) {
        return [
            'id' => $subComment->id,
            'user' => $subComment->user,
            'sub_comment' => $subComment->sub_comment,
            'updated_at' => $subComment->updated_at,
        ];
    });

    // 将新数据追加到当前父评论的子评论集合
    $state['items']->push(...$transformed);

    // 更新分页状态
    $state['hasMore'] = $subComments->hasMorePages();
    $state['nextCursor'] = $state['hasMore'] ? $subComments->nextCursor()->encode() : null;
}

4. 优化父评论查询（loadFirst/loadAllData）

用关联预加载优化父评论的用户查询和子评论统计：

public function loadFirst()
{
    $query = Comment::orderBy('id', 'desc')
        ->where('campaign_id', $this->campaignId)
        ->with('user') // 预加载评论用户
        ->withCount('subComments'); // 统计子评论数量（需Comment模型定义subComments关联）

    $this->comments1 = $query->cursorPaginate(3);
    $this->comments->push(...$this->comments1->items());
    $this->hasMorePages = $this->comments1->hasMorePages();
    $this->nextCursor = $this->hasMorePages ? $this->comments1->nextCursor()->encode() : null;
}

5. 前端渲染（Blade视图）

针对每个父评论渲染对应的子评论和加载按钮：

{{-- 父评论列表 --}}
@foreach($comments as $comment)
    <div class="comment-card">
        <div class="comment-content">
            <p>{{ $comment->comment }}</p>
            <small>作者：{{ $comment->user->name }} · {{ $comment->updated_at->diffForHumans() }}</small>
            <span class="sub-count">子评论：{{ $comment->sub_comments_count }}</span>
        </div>

        {{-- 子评论区域 --}}
        <div class="sub-comments">
            @if(isset($subCommentsState[$comment->id]['items']))
                @foreach($subCommentsState[$comment->id]['items'] as $sub)
                    <div class="sub-comment-card">
                        <p>{{ $sub['sub_comment'] }}</p>
                        <small>作者：{{ $sub['user']->name }} · {{ $sub['updated_at']->diffForHumans() }}</small>
                    </div>
                @endforeach
            @endif

            {{-- 加载更多按钮 --}}
            @if(isset($subCommentsState[$comment->id]['hasMore']) && $subCommentsState[$comment->id]['hasMore'])
                <button wire:click="loadSubData({{ $comment->id }})" class="load-more-btn">
                    查看更多评论
                </button>
            @endif
        </div>
    </div>
@endforeach

关键修复点说明

独立状态管理：每个父评论的子评论分页状态完全独立，不会互相干扰
性能优化：用Eloquent关联预加载替代单独查询用户，避免N+1数据库查询
逻辑简化：移除不必要的全量父评论查询，只针对当前点击的父ID加载子评论
正确数据关联：子评论数据直接绑定到对应父评论，前端渲染不会混乱

内容的提问来源于stack exchange，提问作者Sa'ad Abdurrazzaq