Importieren Sie die JSON-Datei in React

Ich bin neu in React und versuche, eine JSON- DATAVariable aus einer externen Datei zu importieren . Ich erhalte die folgende Fehlermeldung:

Modul "./customData.json" kann nicht gefunden werden

Könnte mir jemand helfen? Es funktioniert, wenn ich meine DATAVariable index.jsin einer externen JSON-Datei habe , aber nicht.

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

Eine gute Möglichkeit (ohne eine gefälschte .js-Erweiterung hinzuzufügen, die für Code und nicht für Daten und Konfigurationen gilt) ist die Verwendung des json-loaderModuls. Wenn Sie create-react-appIhr Projekt mit einem Gerüst versehen haben, ist das Modul bereits enthalten. Sie müssen lediglich Ihren json importieren:

import Profile from './components/profile';

Diese Antwort erklärt mehr.

Diese alte Kastanie ...

Kurz gesagt, Sie sollten require verwenden und den Knoten das Parsen als Teil des require-Aufrufs ausführen lassen und nicht an ein Modul eines Drittanbieters auslagern. Sie sollten auch darauf achten, dass Ihre Konfigurationen kugelsicher sind, was bedeutet, dass Sie die zurückgegebenen Daten sorgfältig prüfen sollten.

Betrachten Sie der Kürze halber das folgende Beispiel:

Angenommen, ich habe eine Konfigurationsdatei 'admins.json' im Stammverzeichnis meiner App, die Folgendes enthält:

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

Beachten Sie die angegebenen Tasten, "userName", "passSalted"!

Ich kann Folgendes tun und die Daten mit Leichtigkeit aus der Datei holen.

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

Jetzt sind die Daten in und können als reguläres (oder Array von) Objekt verwendet werden.

Mit json-loaderinstalliert können Sie verwenden

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

oder auch noch einfacher

import customData from '../customData';

Installieren json-loader

npm install --save-dev json-loader

Der einfachste Ansatz folgt

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

export default someJson

dann

import someJson from './someJson'

Bitte speichern Sie Ihre JSON-Datei mit der Erweiterung .js und stellen Sie sicher, dass sich Ihr JSON im selben Verzeichnis befindet.

Die Lösung, die für mich funktioniert hat, ist folgende: - Ich habe meine Datei data.json von src in ein öffentliches Verzeichnis verschoben. Verwenden Sie dann die Abruf-API, um die Datei abzurufen

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

Das Problem war, dass nach dem Kompilieren der React-App die Abrufanforderung unter der URL " http: // localhost: 3000 / data.json " nach der Datei sucht, die eigentlich das öffentliche Verzeichnis meiner React- App ist. Leider wird beim Kompilieren der React App data.json-Datei nicht von src in das öffentliche Verzeichnis verschoben. Wir müssen also die Datei data.json explizit von src in das öffentliche Verzeichnis verschieben.

versuchen Sie es mit export default DATAoder module.exports = DATA

// benenne die .json-Datei in .js um und behalte sie im src-Ordner

Deklarieren Sie das json-Objekt als Variable

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

Exportieren Sie es mit module.exports

module.exports = customData;

Stellen Sie sicher, dass Sie von der Komponente, die es benötigt, zwei Ordner tief zurücksetzen

import customData from '../customData';

Das hat gut funktioniert 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>

Es gibt mehrere Möglichkeiten, dies zu tun, ohne Code oder Bibliotheken von Drittanbietern zu verwenden (die empfohlene Methode).

1. STATISCHER WEG: Erstellen Sie eine .json-Datei und importieren Sie sie in Ihr Beispiel für eine Reaktionskomponente

Mein Dateiname ist "example.json".

{"example" : "my text"}

Der Beispielschlüssel in example.json kann alles sein, was Sie beachten müssen, um doppelte Anführungszeichen zu verwenden, um zukünftige Probleme zu vermeiden.

So importieren Sie eine Reaktionskomponente

import myJson from "jsonlocation";

und Sie können es überall so verwenden

myJson.example

Jetzt gibt es ein paar Dinge zu beachten. Mit dieser Methode müssen Sie Ihren Import oben auf der Seite deklarieren und können nichts dynamisch importieren.

Was ist nun, wenn wir die JSON-Daten dynamisch importieren möchten? Beispiel eine mehrsprachige Support-Website?

2 DYNAMISCHER WEG

1. Deklarieren Sie Ihre JSON-Datei genau wie in meinem obigen Beispiel

Diesmal importieren wir die Daten jedoch anders.

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

Dies kann auf die gleiche Weise zugreifen.

aber warte wo ist die dynamische Last?

Hier erfahren Sie, wie Sie JSON dynamisch laden

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

Stellen Sie jetzt sicher, dass sich alle Ihre JSON-Dateien im selben Verzeichnis befinden

Hier können Sie den JSON genauso verwenden wie im ersten Beispiel

myJson.example

was hat sich geändert? die Art und Weise, wie wir importieren, weil es das einzige ist, was wir wirklich brauchen.

Ich hoffe das hilft.

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;

Benötigen Sie es in Ihrem Modul:

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

Grüße