博客评论模块forEach循环仅显示最后一条数据的问题求助

问题出在你遍历评论数组时的赋值方式：每次循环都用commentSection.innerHTML = ...，这会直接覆盖评论区的现有内容，所以循环结束后页面只会保留最后一条评论的HTML。

给你两种可行的修复方案：

方案一：追加内容（简单直接） #

先清空评论区原有内容，再用innerHTML +=逐个追加评论元素：

if (comments.length > 0){
    // 清空原有内容，避免重复点击重复加载评论
    commentSection.innerHTML = '';
    comments.forEach(comment => {
        console.log(comment.comment);
        commentSection.innerHTML += `<div>${comment.user_id} says: <br> ${comment.comment}</div>`;
    })
}

方案二：一次性赋值（性能更优） #

先把所有评论的HTML拼接成一个字符串，再一次性赋值给评论区，减少DOM操作次数：

if (comments.length > 0){
    // 用map遍历生成每个评论的HTML，再join成完整字符串
    const commentsHTML = comments.map(comment => 
        `<div>${comment.user_id} says: <br> ${comment.comment}</div>`
    ).join('');
    commentSection.innerHTML = commentsHTML;
}

另外注意：你代码里的const commentSectionAddClass = document.querySelector('comments');是无效的类选择器（缺少.），而且这行变量没有被使用，可以直接删除。

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