Question

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

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

有人可以帮助我吗？如果我在DATA中有index.js变量，但在外部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'));

hobbies.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并让节点将解析作为require调用的一部分进行处理，而不是将其外包给第三者模块。您还应该注意您的配置是防弹的，这意味着您应该仔细检查返回的数据。

为简便起见，请考虑以下示例：

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

[{
  // Note the quoted keys, "userName", "passSalted"!
  "userName":"tech1337",
  "passSalted":"xxxxxxxxxxxx"
}]

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

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

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

Answer 3

最简单的方法是

Traceback (most recent call last):
  File "stdin<>", line 38, in <module>
    cursor.copy_from(f, 'ebi_mut_db.mutations_affecting_interactions', sep=';')
psycopg2.errors.BadCopyFileFormat: extra data after last expected column
CONTEXT:  COPY mutations_affecting_interactions, line 23: "EBI-878110;"p.[Ala223Pro;Ala226Pro;Ala234Asp]""

然后

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

export default someJson

Answer 4

尝试export default DATA或module.exports = DATA

Answer 5

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

Answer 6

安装json-loader后，您可以使用

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

或者甚至更简单

import customData from '../customData';

要安装json-loader

npm install --save-dev json-loader

Answer 7

对我有用的解决方案是：我将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显式移动到公共目录。

Answer 8

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

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

我的文件名为“ example.json”

{"example" : "my text"}

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

如何导入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

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

我希望这会有所帮助。

Answer 9

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

将json对象声明为变量

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

使用module.exports导出

module.exports = customData;

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

import customData from '../customData';

Answer 10

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

import config from './config.json'

Answer 11

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

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 13

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

简单地导入任何js

brain.loadData("exampleFile.json");

我想就这么简单。绝对值得一试:D

在React中导入JSON文件

13 个答案: