it-swarm.com.de

Importieren Sie die JSON-Datei in React

Ich bin neu bei React und versuche, eine JSON-Variable DATA aus einer externen Datei zu importieren. Ich erhalte folgende Fehlermeldung: 

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

Könnte mir jemand helfen? Es funktioniert, wenn ich meine Variable DATA in index.js habe, aber nicht, wenn sie sich in einer externen JSON-Datei befindet.

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
27
Hugo Seleiro

Ein schöner Weg (ohne Hinzufügen einer gefälschten .js-Erweiterung, die für Code und nicht für Daten und Konfigurationen gedacht ist) ist die Verwendung von json-loader-Modul. Wenn Sie create-react-app zum Scaffold Ihres Projekts verwendet haben, ist das Modul bereits enthalten. Sie müssen nur Ihren json importieren:

import Profile from './components/profile';

Diese Antwort erklärt mehr.

27

Diese alte Kastanie ...

Kurz gesagt, sollten Sie den Parsing-Befehl als Teil des Requirement-Aufrufs als Require- und Pipe-Knoten verwenden und nicht an ein Drittanbieter-Modul vergeben. Sie sollten auch darauf achten, dass Ihre Konfigurationen kugelsicher sind, was bedeutet, dass Sie die zurückgegebenen Daten sorgfältig prüfen sollten.

Betrachten wir der Kürze halber folgendes Beispiel:

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

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

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 Objekt (oder Array von Objekten) verwendet werden.

8
Tech1337

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

6
Shubham

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

6
Salvatore

Wenn json-loader installiert ist, können Sie verwenden

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

oder auch noch einfacher

import customData from '../customData';

So installieren Sie json-loader

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

Die Lösung, die für mich funktioniert hat, ist: - Ich habe meine data.json-Datei von src in das öffentliche Verzeichnis ..__ verschoben. Dann habe ich die Abruf-API zum Abrufen der Datei verwendet

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 die Abrufanforderung nach dem Kompilieren der reakt-App nach der Datei unter der URL " http: // localhost: 3000/data.json " sucht, die eigentlich das öffentliche Verzeichnis meiner Reaktiv-App ist. Leider wird die Datei data.json während des Kompilierens nicht von src in das öffentliche Verzeichnis verschoben. Daher müssen wir die Datei data.json explizit von src in das öffentliche Verzeichnis verschieben.

1
Akash Seth

// Benennen Sie die .json-Datei in .js um und verbleiben Sie im Ordner src

Deklarieren Sie das Json-Objekt als Variable

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

Exportieren Sie es mit module.exports 

module.exports = customData;

Stellen Sie sicher, dass von der Komponente, die es benötigt, zwei Ordner tief entfernt werden

import customData from '../customData';

0
cesar3sparza