如何让本地data.json文件中的评论内容正确显示在React页面上

• 你代码中错误使用Object.keys()处理数组类型的comments字段：数组的Object.keys()返回值是索引的字符串集合（即['0','1','2']），这是页面仅展示0、1、2的直接原因
• 本地JSON文件的导入逻辑本身没有问题，无需调整导入规则，仅修改渲染逻辑即可修复

直接遍历data.comments数组本身，不需要用Object.keys()包裹，修改后的组件代码如下：

import React, { Component } from 'react'
// 建议补全.json后缀，避免部分构建工具识别文件异常
import data from './../data.json'


class CommentList extends Component {
    render () {
      const comments = data.comments;

      return (
       <ul>
         {/* 直接遍历数组，取每个评论对象的text字段渲染 */}
         {comments.map((item, index) => (<li key={index}>{item.text}</li>))}
       </ul>
      )
    }
  };

export default CommentList

• 确认JSON文件路径与导入路径匹配：当前代码导入的是上一级目录的data文件，请核对文件实际存放位置
• 在render方法中添加console.log(data)，打开浏览器控制台查看输出内容是否和你编写的JSON内容一致，确认导入是否正常
• 若构建工具报错找不到data模块，可检查是否安装了JSON解析相关的loader（create-react-app等官方脚手架默认已支持，无需额外配置）

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