在 React 中导入 JSON 文件

Question

我是 React 新手，我正在尝试从外部文件导入 JSON DATA 变量。我收到以下错误：

找不到模块“./customData.json”

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

index.js

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'));

爱好.js

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;

profile.js

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

customData.json

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

export default DATA

Answer 1

一种好方法（不添加用于代码而非数据和配置的虚假 .js 扩展名）是使用 json-loader 模块。如果你已经使用create-react-app搭建了你的项目，模块已经包含，你只需要导入你的json：

import Profile from './components/profile';

This答案解释更多。

Answer 2

这个老栗子……

简而言之，您应该使用 require 并让 node 处理解析作为 require 调用的一部分，而不是将其外包给第 3 方模块。您还应该注意您的配置是防弹的，这意味着您应该仔细检查返回的数据。

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

例如，假设我的应用根目录中有一个配置文件“admins.json”，其中包含以下内容：

管理员.json

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

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

我可以执行以下操作，轻松地从文件中取出数据。

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

现在数据在里面，可以用作一个常规（或数组）对象。

Answer 3

安装了json-loader，就可以使用了

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

或者更简单的

import customData from '../customData';

安装json-loader

npm install --save-dev json-loader

Answer 4

最简单的方法如下

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

export default someJson

然后

import someJson from './someJson'

Answer 5

对我有用的解决方案是：- 我将我的 data.json 文件从 src 移动到公共目录。 然后使用 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 应用程序后，获取请求会在 URL“http://localhost:3000/data.json”处查找文件，这实际上是我的 react 应用程序的公共目录。但不幸的是，在编译 react app 时 data.json 文件并没有从 src 移动到公共目录。所以我们必须明确地将 data.json 文件从 src 移动到 public 目录。

Answer 6

请使用 .js 扩展名存储您的 JSON 文件，并确保您的 JSON 应位于同一目录中。

Answer 7

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

将json对象声明为变量

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

使用 module.exports 导出它

module.exports = customData;

从需要它的组件中，确保退出两个文件夹

import customData from '../customData';

Answer 8

试试export default DATA 或module.exports = DATA

Answer 9

有多种方法可以在不使用任何第三方代码或库的情况下执行此操作（推荐的方法）。

第一种静态方式：创建一个 .json 文件，然后将其导入您的反应组件示例中

我的文件名为“example.json”

{"example" : "my text"}

example.json 中的 example 键可以是任何内容，请记住使用双引号来防止将来出现问题。

如何在 react 组件中导入

import myJson from "jsonlocation";

你可以像这样在任何地方使用它

myJson.example

现在有一些事情需要考虑。使用此方法，您必须在页面顶部声明您的导入，并且无法动态导入任何内容。

现在，如果我们想要动态导入 JSON 数据呢？例如多语言支持网站？

2 动态方式

首先声明您的 JSON 文件，就像我上面的示例一样

但这次我们导入数据的方式不同。

let language = require('./en.json');

这可以通过相同的方式访问。

但是等待动态负载在哪里？

这里是动态加载 JSON 的方法

let language = require(`./${variable}.json`);

现在确保所有 JSON 文件都在同一个目录中

这里你可以像第一个例子一样使用 JSON

myJson.example

发生了什么变化？我们导入的方式，因为这是我们真正需要的唯一东西。

我希望这会有所帮助。

Answer 10

var langs={
  ar_AR:require('./locale/ar_AR.json'),
  cs_CZ:require('./locale/cs_CZ.json'),
  de_DE:require('./locale/de_DE.json'),
  el_GR:require('./locale/el_GR.json'),
  en_GB:require('./locale/en_GB.json'),
  es_ES:require('./locale/es_ES.json'),
  fr_FR:require('./locale/fr_FR.json'),
  hu_HU:require('./locale/hu_HU.json')
}
module.exports=langs;

在你的模块中需要它：

let langs=require('./languages');

问候

Answer 11

从create-react-app 创建的 React 17，默认导入 json 即可。

import config from './config.json'

Answer 12

这在React 16.11.0 中运行良好

// in customData.js
export const customData = {
  //json data here
  name: 'John Smith',
  imgURL: 'http://lorempixel.com/100/100/',
  hobbyList: ['coding', 'writing', 'skiing']
}

// in index.js
import { customData } from './customData';

// example usage later in index.js
<p>{customData.name}</p>

Answer 13

对我有用的方法是将 JSON 文件简单地放在公用文件夹中。您可以使用

简单地导入任何js

brain.loadData("exampleFile.json");

就像我猜的一样简单。绝对值得一试：D