React对接Firebase时如何按审核状态数组渲染对应评论

核心逻辑：你从Firebase拿到的user_comments和ucomments_is_approved是索引严格对齐的关联数组，遍历评论列表时拿到当前项的索引，匹配同索引位置的审核状态，仅当状态为true时渲染对应评论即可。

修正后的代码 #

你原来的代码存在三个问题：全量遍历评论未做状态判断、React中误用class属性（需替换为className）、<p>标签嵌套<h1>块级元素不符合HTML规范，修正后代码如下：

<div className="container card">
  {individualProduct.user_comments.map((eachComment, index) => {
    // 匹配当前评论对应索引位置的审核状态
    const commentApproved = individualProduct.ucomments_is_approved[index];
    // 审核通过返回评论节点，未通过返回null不会被渲染
    return commentApproved ? (
      <h1 key={index} className="comment">
        {eachComment}
      </h1>
    ) : null;
  })}
</div>

逻辑验证 #

以你给出的示例数据为例：

• ucomments_is_approved = [true, false, false, true]
• user_comments = ["good", "bad", "verybad", "recommended"]
  遍历过程中：
• 索引0：审核状态为true，渲染评论「good」
• 索引1：审核状态为false，跳过不渲染
• 索引2：审核状态为false，跳过不渲染
• 索引3：审核状态为true，渲染评论「recommended」
  最终页面仅展示两条审核通过的评论，符合需求。

注意事项 #

• React遍历渲染列表时必须为列表项添加唯一的key属性，当前场景下两个数组按索引严格对齐，用索引作为key即可满足要求
• 需确保Firebase中两个数组的存储顺序严格对应，同索引位的评论和审核状态必须匹配，否则会出现内容错配问题

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