在React中导入JSON文件

Question

我是React的新手，正在尝试从外部文件导入一个JSON变量DATA。但是出现以下错误：

无法找到模块"./customData.json"

有人能帮帮我吗？如果我的DATA变量在index.js中，则可以正常工作，但在外部JSON文件中就不行。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import customData from './customData.json';
import Profile from './components/profile';
import Hobbies from './components/hobbies';

class App extends Component {
  render() {
    return (
      <div>
        <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} />
        <Hobbies hobbyList={this.props.profileData.hobbyList}/>
      </div>
    );
  }
}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container'));

import React, {Component} from 'react';

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby, index){
        return (<li key={index}>{hobby}</li>);
    });
    return (
        <div>
            <h5>My hobbies:</h5>
            <ul>
                {hobbies}
            </ul>
        </div>
    );
  } 
});

export default Hobbies;

import React from 'react';

var Profile = React.createClass({
render: function(){
    return (
        <div>
            <h3>{this.props.name}</h3>
            <img src={this.props.imgUrl} />
        </div>
    )
  }
});

export default Profile

var DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}

export default DATA

- Hugo Seleiro

---

您的customData.json不是一个JSON。 - Rambalac

Answer 1

一个不错的方法是使用json-loader模块。这样你就不需要添加一个虚假的.js扩展名（这个扩展名是用于代码而不是数据/配置）。这个模块已经包含在create-react-app和Webpack 2.x+（当前版本为5.x）中，所以如果你使用这些工具之一，你可以轻松地导入你的json文件，无需任何额外的配置/依赖。

import Profile from './components/profile';

查看更多详细信息，请参阅this的答案。

- Javad

---

奇怪。当我尝试在create-react-app中导入json文件时，它返回undefined。 - developarvin

在我看来，这个答案应该真正成为被采纳的答案。这个答案确实是一个解决方案，但只适用于React应用程序的子集 - 只适用于使用create-react-app启动的应用程序。 - Seb

FYI，这个可以工作。但是我遇到了一个特殊情况，即JSON文件的名称中不能有下划线。例如，/profile.json 是可以的，但 /my_profile.json 不行。 - BigRon

@Seb 看看我的最后一次编辑。这个解决方案也适用于所有使用Webpack的项目 - 这是大多数React应用程序和绝大多数Web应用程序的情况。此外，即使不使用Webpack，你也可以将json-loader模块添加到任何Web应用程序中，因此它没有任何限制。 - Javad

Answer 2

这是一个老生常谈的问题...

简而言之，你应该使用 require 并让 Node 在 require 调用中处理解析，而不是将其外包给第三方模块。你还应该确保你的配置文件是防弹的，这意味着你应该仔细检查返回的数据。

为了简洁起见，考虑以下示例：

例如，假设我有一个名为'admins.json'的配置文件位于我的应用程序根目录中，其中包含以下内容：

admins.json

[{
  "userName": "tech1337",
  "passSalted": "xxxxxxxxxxxx"
}]

请注意引用的键，"userName"，"passSalted"！

我可以做以下操作，轻松地从文件中获取数据。

let admins = require('~/app/admins.json');
console.log(admins[0].userName);

现在数据已经就绪，可以像常规对象（或对象数组）一样使用。

- Tech1337

---

绝对正确的答案。不需要第三方模块来读取JSON数据。 - ngoue

JSON格式要求在键名周围加上双引号。此外，JSON格式不支持注释。 - Let Me Tink About It

这是正确的方式。 - Lautaro Jorge Garcia

这并没有回答如何在 React 应用程序中加载 JSON 文件的问题。React 应用程序中没有“Node”。你可能想建议的是让后端提供 JSON 负载并调用它，但告诉他们使用 require 对 OP 没有帮助。 - Michael Oryl

我之前写过这个答案，它确实做了一些假设，并忽略了在React或其他JS框架应用中实现require的选项。它可能措辞不当，但我指的是Node require语法，而不是Node.js本身。默认的CRA配置将为Web转译require，但您也可以使用browserify来达到相同的效果。 - Tech1337

@LICON99 这可能是你代码中正在发生的事情，只是你没有展示出来。 - tevemadar

Answer 3

React 17从create-react-app创建，导入JSON默认可行。

import config from './config.json'

- s1n7ax

Answer 4

安装了json-loader后，您可以使用以下代码：

import customData from '../customData.json';

或者更简单地说

import customData from '../customData';

安装json-loader

npm install --save-dev json-loader

- Let Me Tink About It

Answer 5

最简单的方法是按照以下步骤进行

// Save this as someJson.js
const someJson = {
  name: 'Name',
  age: 20
}

export default someJson

import someJson from './someJson'

- dev_khan

---

这不是一个 JSON。 - Rambalac

这是一个 JavaScript 对象，而不是 JSON 对象。 - Operator

Answer 6

对我起作用的解决方案是：将我的 data.json 文件从 src 目录移动到 public 目录。然后使用 fetch API 获取该文件。

fetch('./data.json').then(response => {
      console.log(response);
      return response.json();
    }).then(data => {
      // Work with JSON data here
      console.log(data);
    }).catch(err => {
      // Do something for an error here
      console.log("Error Reading data " + err);
    });

问题在于编译 React 应用程序后，fetch 请求会在 URL "http://localhost:3000/data.json" 上查找该文件，这实际上是我的 React 应用程序的 public 目录。但不幸的是，在编译 React 应用程序时，data.json 文件未从 src 移动到 public 目录。因此，我们必须明确地将 data.json 文件从 src 移动到 public 目录。

- Akash Kumar Seth

Answer 7

请将您的 JSON 文件保存为 .js 扩展名，并确保您的 JSON 文件与同一目录中。

- Shubham

---

已解决!! 感谢您的答案!! - Hugo Seleiro

Answer 8

在当前的 React 构建中，您只需导入并使用：

import jsonData from 'path/to/myJson.json'

- Avi E. Koenig

Answer 9

//将.json文件重命名为.js并保存在src文件夹中

将json对象声明为一个变量

var customData = {
   "key":"value"
};

使用module.exports导出它

module.exports = customData;

从需要它的组件中，确保返回两个文件夹

import customData from '../customData';

- cesar3sparza

---

@Rambalac，您能否提供有效的理由？ - dev_khan

Answer 10

尝试使用export default DATA或module.exports = DATA。

- Salvatore

---

你试过用 require 代替 import 吗？但我很确定这不是问题，路径是正确的吧？ 哦，还要尝试写 import DATA 而不是 customData。 - Salvatore