React新手从data.json读取数据渲染Instagram动态的用户名评论点赞方法

问题原因&修复方案 #

• JSX语法错误：React组件return只能返回单一根节点，你当前直接并列返回img、p等多个标签属于语法错误，可以用React.Fragment（简写<></>）包裹所有子元素；同时JSX中不能直接写//格式的注释，需要用{/* 注释内容 */}格式，单标签hr要写成<hr />符合JSX语法规范
• 字段路径错误：你能正常渲染data.owner.profile_pic_url说明owner层级下没有node嵌套，用户名直接取data.owner.username即可，不需要额外加.node
• 评论数据需要遍历渲染：评论列表存储在data.edge_media_to_comment.edges数组中，需要用map方法遍历输出每条评论的内容和点赞数；动态正文不存在data.node.text路径，你已经导入了getCaptionFromEdges工具方法，直接调用读取edge_media_to_caption字段即可

修正后代码 #

import React from "react";
import styles from "./styles";
import { getCaptionFromEdges } from "./helpers";

const Posts = (props) => {
  const { data } = props;
  return (
    <>
      <img src={data.owner.profile_pic_url} alt="用户头像" />
      <p>{data.owner.username}</p>
      
      <hr />
      {/* 动态正文内容 */}
      <p>{getCaptionFromEdges(data.edge_media_to_caption.edges)}</p>

      {/* 遍历渲染所有评论及对应点赞数 */}
      <div>
        {data.edge_media_to_comment.edges.map((commentItem, index) => (
          <div key={index}>
            <span>{commentItem.node.owner.username}：</span>
            <span>{commentItem.node.text}</span>
            <span>（点赞数：{commentItem.node.edge_liked_by.count}）</span>
          </div>
        ))}
      </div>
    </>
  );
};

export default Posts;

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