React项目中如何返回JSON文件及访问渲染其中数据？

嘿，我来帮你搞定这两个React里和JSON文件相关的问题！

1. 如何在React中引入JSON文件？ #

在React项目中（通常基于Webpack或Vite打包），你可以直接通过两种方式引入JSON文件：

• 使用require()方法，Webpack会自动把JSON解析成JavaScript对象，就像你示例里写的那样。
• 使用ES6的import语法，同样能直接导入并解析JSON，这种写法更符合现代JS规范。

两种方式都不需要额外的JSON解析步骤，导入后就能直接用里面的数据。

2. 正确访问JSON文件并展示数据 #

你提供的示例代码里有个小问题：你的dictionary.json顶层是一个包含dictionary数组的对象，而你导入后直接对整个对象调用map()方法——这会报错，因为对象没有map方法。我们需要先拿到里面的数组，再进行遍历渲染。

修正后的完整代码 #

首先，你的dictionary.json保持不变：

{
  "dictionary": [
    { "index": "1", "engwords": "Hello", "ruswords": "Привет" },
    { "index": "2", "engwords": "How are you?", "ruswords": "Как твои дела?" },
    { "index": "3", "engwords": "How old are you?", "ruswords": "Сколько тебе лет?" }
  ]
}

然后修改component.js：

import React, { Component } from "react";
import "./style.scss";

// 方式1：使用require，解构出dictionary数组更方便
// const { dictionary: wordList } = require('./../../dictionary/dictionary.json');

// 方式2：ES6 import（更推荐）
import jsonData from './../../dictionary/dictionary.json';

export default class Test extends Component {
  render() {
    // 取出JSON里的实际数组数据
    const wordList = jsonData.dictionary;
    return (
      <div className="test">
        {/* 遍历数组，展示每个元素的具体属性 */}
        {wordList.map(elem => (
          <div key={elem.index} className="word-entry">
            <p>序号：{elem.index}</p>
            <p>英文：{elem.engwords}</p>
            <p>俄文：{elem.ruswords}</p>
          </div>
        ))}
      </div>
    );
  }
};

关键修改点说明： #

• 正确获取数组：因为JSON的顶层是对象，所以要通过jsonData.dictionary拿到里面的数组（或者用解构赋值const { dictionary: wordList } = jsonData;让变量名更直观）。
• 添加key属性：React遍历列表时必须给每个元素添加唯一的key，这里用elem.index作为key是合适的，避免渲染警告。
• 渲染具体属性：不要直接渲染elem（那样会显示[object Object]），而是访问对象的engwords、ruswords这些属性来展示实际内容。

额外注意事项 #

• 确保JSON文件的路径正确：如果组件和JSON文件的相对路径不对，会导致导入失败，可以检查一下项目的目录结构。
• 如果是函数组件，写法类似：直接导入JSON后在JSX里遍历即可，不需要class组件的语法。

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