在React中导入JSON文件

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

找不到模块“ ./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

一种不错的方法（不添加伪造的.js扩展名，用于代码而不用于数据和配置）是使用json-loader模块。如果您曾经使用create-react-app过脚手架，那么该模块已经包含在内，您只需导入json：

import Profile from './components/profile';

这个答案可以解释更多。

这个老栗子

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

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

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

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

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

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

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

现在数据已放入并且可以用作常规（或数组）对象。

随着json-loader安装，您可以使用

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

或者，甚至更简单

import customData from '../customData';

安装 json-loader

npm install --save-dev json-loader

以下是最简单的方法

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

export default someJson

然后

import someJson from './someJson'

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

对我有用的解决方案是：-我将data.json文件从src移到了公共目录。然后使用提取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显式移动到公共目录。

尝试export default DATA或 module.exports = DATA

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

声明json对象为变量

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

使用module.exports导出

module.exports = customData;

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

import customData from '../customData';

这在 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>

有多种方法可以执行此操作，而无需使用任何第三方代码或库（建议的方法）。

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

我的文件名为“ example.json”

{"example" : "my text"}

example.json中的example键可以是任何东西，只要记住要使用双引号来防止将来出现问题即可。

如何导入React组件

import myJson from "jsonlocation";

你可以在任何地方使用它

myJson.example

现在有几件事要考虑。使用此方法，您不得不在页面顶部声明导入，并且无法动态导入任何内容。

现在，如果我们要动态导入JSON数据该怎么办？一个多语言支持网站的例子？

2动态方式

1完全像上面的示例一样声明您的JSON文件

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

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

可以以相同的方式访问。

但是等一下动态负载在哪里？

这是如何动态加载JSON

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

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

在这里，您可以使用与第一个示例相同的方式使用JSON

myJson.example

什么改变了？我们导入的方式，因为这是我们唯一需要的。

我希望这有帮助。

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

问候