Laravel文章评论回复层级显示问题：评论重复显示的技术解决问询

我给文章添加了评论功能，对应的数据库表结构定义如下：

Schema::create('article_comments', function (Blueprint $table) { 
    $table->bigIncrements('id'); 
    $table->unsignedBigInteger('article_id'); 
    $table->foreign('article_id') ->references('id')->on('articles')->onDelete('cascade'); 
    $table->string('name'); 
    $table->string('email'); 
    $table->text('text'); 
    $table->string('date'); 
    $table->unsignedBigInteger('comment_id')->nullable(); 
    $table->foreign('comment_id') ->references('id')->on('article_comments')->onDelete('set null'); 
    $table->timestamps(); 
});

我准备了两类评论展示区块，分别用于普通评论和评论回复，二者仅CSS类名不同：

普通评论的前端展示代码：

<div class="comment-list"> 
    @foreach($article_comments as $article_comment) 
        <div class="comment-list__item"> 
            <div class="item-card"> 
                <div class="item-card__header"> 
                    <div class="item-card__title"> 
                        <div class="label"> {!! $article_comment->name !!} </div> 
                        <div class="data"> {!! date('d F Y', strtotime($article_comment->date)) !!} </div> 
                    </div> 
                </div> 
                <div class="item-card__content"> {!! $article_comment->text !!} </div> 
            </div> 
        </div> 
    @endforeach 
</div>

评论回复的前端展示代码：

<div class="comment-sub-list"> 
    <div class="comment-sub-list__item"> 
        <div class="item-card"> 
            <div class="item-card__header"> 
                <div class="item-card__title"> 
                    <div class="label"> {!! $article_comment->name !!} </div> 
                    <div class="data"> {!! date('d F Y', strtotime($article_comment->date)) !!} </div> 
                </div> 
            </div> 
            <div class="item-card__content"> {!! $article_comment->text !!} </div> 
        </div> 
    </div> 
</div>

遇到的问题 #

我的需求是：当comment_id字段不为空时，该评论作为对应ID评论的回复展示，但目前实现逻辑有问题。我尝试通过以下代码判断并获取回复评论：

$articleCommentsReply = $article_comments->where('comment_id', $article_comment->comment_id)->whereNotNull('comment_id')->first();

结果出现评论重复显示的问题：同一条评论既作为普通评论展示，又被当作回复重复显示。

解决方案 #

第一步：用Eloquent关联优化数据获取 #

首先在ArticleComment模型中定义父子评论关联，这能让我们更优雅地处理层级关系：

// app/Models/ArticleComment.php
class ArticleComment extends Model
{
    // 定义关联：一个评论拥有多个回复
    public function replies()
    {
        return $this->hasMany(ArticleComment::class, 'comment_id');
    }

    // 可选：定义父评论关联
    public function parentComment()
    {
        return $this->belongsTo(ArticleComment::class, 'comment_id');
    }
}

然后在控制器中，只获取顶级评论（comment_id为null的），并预加载其回复，避免N+1查询问题：

// 控制器代码示例
$article_comments = ArticleComment::where('article_id', $article_id)
    ->whereNull('comment_id')
    ->with('replies')
    ->get();

第二步：前端层级渲染逻辑 #

现在前端只需要遍历顶级评论，然后在每个顶级评论下嵌套渲染它的回复即可，彻底避免重复显示：

<div class="comment-list"> 
    @foreach($article_comments as $article_comment) 
        <!-- 渲染顶级评论 -->
        <div class="comment-list__item"> 
            <div class="item-card"> 
                <div class="item-card__header"> 
                    <div class="item-card__title"> 
                        <div class="label"> {!! $article_comment->name !!} </div> 
                        <div class="data"> {!! date('d F Y', strtotime($article_comment->date)) !!} </div> 
                    </div> 
                </div> 
                <div class="item-card__content"> {!! $article_comment->text !!} </div> 
            </div>

            <!-- 渲染当前评论的所有回复 -->
            @if($article_comment->replies->isNotEmpty())
                <div class="comment-sub-list"> 
                    @foreach($article_comment->replies as $reply)
                        <div class="comment-sub-list__item"> 
                            <div class="item-card"> 
                                <div class="item-card__header"> 
                                    <div class="item-card__title"> 
                                        <div class="label"> {!! $reply->name !!} </div> 
                                        <div class="data"> {!! date('d F Y', strtotime($reply->date)) !!} </div> 
                                    </div> 
                                </div> 
                                <div class="item-card__content"> {!! $reply->text !!} </div> 
                            </div> 
                        </div>
                    @endforeach
                </div>
            @endif
        </div> 
    @endforeach 
</div>

问题根源解释 #

你之前的逻辑是遍历所有评论（包括顶级和回复），然后又去查找回复，导致原本属于回复的评论，既在顶级循环中被渲染，又在回复循环中被再次渲染。通过只获取comment_id为null的顶级评论，再嵌套渲染其关联的回复，就能彻底避免重复问题。

额外优化建议 #

1. 把日期格式化逻辑封装到模型中，避免前端重复代码：

// ArticleComment模型添加访问器
public function getFormattedDateAttribute()
{
    return date('d F Y', strtotime($this->date));
}

前端直接使用{!! $article_comment->formatted_date !!}即可。

2. 注意{!! !!}的安全风险：如果用户输入包含恶意脚本，会引发XSS攻击。建议优先使用{{ }}输出，除非你已经通过HTMLPurifier等工具做了内容净化处理。

内容的提问来源于stack exchange，提问作者chu