web-dev-qa-db-ja.com

ReactにJSONファイルをインポートします

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
javascriptjsonreactjs
43
Hugo Seleiro

良い方法の1つは（データや構成用ではないコード用の偽の.js拡張子を追加せずに）json-loaderモジュールを使用することです。 create-react-appを使用してプロジェクトのスキャフォールディングを行っている場合、モジュールはすでに含まれています。jsonをインポートするだけです。

import Profile from './components/profile';

これ 回答でさらに説明します。

45
Javad Sadeqzadeh

この古い栗...

つまり、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);

これでデータが入力され、通常の（または配列の）オブジェクトとして使用できます。

15
Tech1337

JSONファイルを.js拡張子で保存し、JSONが同じディレクトリにあることを確認してください。

7
Shubham

export default DATAまたはmodule.exports = DATAで試してください

6
Salvatore

json-loader をインストールすると、使用できます

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

または、さらに簡単に

import customData from '../customData';

インストールする json-loader

npm install --save-dev json-loader
5
Mowzer

私のために働いた解決策は次のとおりです：-私はsrcからpublicディレクトリにdata.jsonファイルを移動しました。次に、フェッチ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からパブリックディレクトリに明示的に移動する必要があります。

3
Akash Kumar Seth

// .jsonファイルの名前を.jsに変更し、srcフォルダーに保存します

Jsonオブジェクトを変数として宣言します

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

Module.exportsを使用してエクスポートする

module.exports = customData;

それを必要とするコンポーネントから、2つのフォルダを深くバックアウトすることを確認してください

import customData from '../customData';

2
cesar3sparza