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拡張子を追加せずに）1つの優れた方法は、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);

これで、データが入り、通常の（または配列の）オブジェクトとして使用できるようになりました。

最も簡単なアプローチは次のとおりです

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

export default someJson

その後

import someJson from './someJson'

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

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

または、さらに簡単に

import customData from '../customData';

インストールするには json-loader

npm install --save-dev json-loader

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

私のために働いた解決策は次のとおりです：-data.jsonファイルをsrcからパブリックディレクトリに移動しました。次に、fetchAPIを使用してファイルをフェッチしました

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;

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

import customData from '../customData';

サードパーティのコードやライブラリを使用せずにこれを行うには、複数の方法があります（推奨される方法）。

最初の静的な方法：.jsonファイルを作成し、それを反応コンポーネントの例にインポートします

私のファイル名は「example.json」です

{"example" : "my text"}

example.json内のexampleキーは、将来の問題を防ぐために二重引用符を使用することを覚えておいてください。

反応コンポーネントにインポートする方法

import myJson from "jsonlocation";

このようにどこでも使用できます

myJson.example

今、考慮すべきことがいくつかあります。このメソッドを使用すると、ページの上部でインポートを宣言する必要があり、動的に何もインポートできません。

では、JSONデータを動的にインポートしたい場合はどうでしょうか？多言語サポートWebサイトの例？

2ダイナミックウェイ

最初に、上記の例とまったく同じようにJSONファイルを宣言します

ただし、今回は別の方法でデータをインポートしています。

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

これは同じ方法でアクセスできます。

しかし、動的負荷はどこにあるのでしょうか？

JSONを動的にロードする方法は次のとおりです

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

ここで、すべてのJSONファイルが同じディレクトリ内にあることを確認してください

ここでは、最初の例と同じ方法でJSONを使用できます

myJson.example

何が変わったの？インポートする方法は、本当に必要なものだけだからです。

これがお役に立てば幸いです。

これはでうまくいきました 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>

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

よろしく