React渲染Instagram动态时循环展示全部评论和点赞数问题咨询

你当前代码的问题是仅读取了评论数组的第一个元素（data.edge_media_to_comment.edges[0]），因此只能展示单条评论，只要遍历整个评论数组渲染即可，修改逻辑如下：

修改步骤 #

1. 替换单条评论获取逻辑，拿到完整评论数组
2. 在JSX中使用map方法遍历评论数组，生成多条评论节点，每个节点添加唯一key避免React告警
3. 若需要展示每条评论的发布者信息、点赞数，可从对应评论的node字段中提取对应值

修改后完整代码 #

import React from "react";
import styles from "./styles";
 
const Posts = (props) => {
  const { data } = props;
  // 拿到完整的评论数组，而非仅第一个元素
  const commentList = data.edge_media_to_comment.edges || []
  const locationName = data.location.name
  const username = data.owner.username 
  const id = data.id 
  const url = `https://www.instagram.com/${data.owner.username}`
  const postLikes = data.edge_media_preview_like.count

  return (
    <>
      <a href={url} rel="noopener noreferrer" target="_blank" key={id}>
        <img src={data.owner.profile_pic_url} alt={`${username}的头像`} />
      </a>
      <span>{locationName}</span> 
      <a href={url} rel="noopener noreferrer" target="_blank" key={id}>@{username}</a>
      <p>{username}</p>
      
      <hr />

      <ul> 
        {/* 遍历所有评论生成节点 */}
        {commentList.map((commentItem) => {
          const comment = commentItem.node
          return (
            <li key={comment.id}>
              {/* 可根据需要调整评论展示字段 */}
              <span>{comment.owner.username}：</span>
              {comment.text || "无评论内容"}
              {/* 若要展示评论点赞数可以保留下面这段 */}
              <span className="comment-likes">（{comment.edge_liked_by?.count || 0}赞）</span>
            </li>
          )
        })}
        <li className="post-item-likes"> 
          帖子点赞数：{postLikes !== null ? postLikes.toLocaleString() : 0}
        </li>
      </ul>
      <hr />
    </>
  );
};

export default Posts;

补充说明 #

如果需要适配评论为空的场景，可在遍历前添加判断，当commentList.length === 0时输出暂无评论的提示即可。

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