Laden von JSON-Daten aus der lokalen Datei in React JS

Ich habe eine React-Komponente und möchte meine JSON-Daten aus einer Datei laden. Das Konsolenprotokoll funktioniert derzeit nicht, obwohl ich die Variable erstelle Daten als globale Daten

'use strict';

var React = require('react/addons');

// load in JSON data from file
var data;

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "data.json", true);
oReq.send();

function reqListener(e) {
    data = JSON.parse(this.responseText);
}
console.log(data);

var List = React.createClass({
  getInitialState: function() {
    return {data: this.props.data};    
  },
  render: function() {
    var listItems = this.state.data.map(function(item) {
        var eachItem = item.works.work;        

        var photo = eachItem.map(function(url) {
            return (
                <td>{url.urls}</td> 
            )
        });
    });
    return <ul>{listItems}</ul>
  }
});

var redBubble = React.createClass({
    render: function() {
      return (
        <div>
          <List data={data}/>          
        </div>
      );
    }
  });

module.exports = redBubble;

Im Idealfall würde ich es lieber so machen, aber es funktioniert nicht - es versucht hinzuzufügen ".js" am Ende des Dateinamens .

var data = require('./data.json');

Jeder Rat auf dem besten Weg, vorzugsweise dem "Reagieren" Weg, wäre sehr dankbar!

Sie öffnen eine asynchrone Verbindung , haben Ihren Code jedoch so geschrieben, als wäre er synchron. Die reqListenerRückruffunktion wird nicht synchron mit Ihrem Code ausgeführt (d. H. Vorher)React.createClass ) ausgeführt, sondern erst, nachdem Ihr gesamtes Snippet ausgeführt wurde und die Antwort von Ihrem Remote-Standort empfangen wurde.

Sofern Sie sich nicht in einer Quantenverschränkungsverbindung ohne Latenz befinden, ist dies gut, nachdem alle Ihre Anweisungen ausgeführt wurden. Um beispielsweise die empfangenen Daten zu protokollieren, würden Sie:

function reqListener(e) {
    data = JSON.parse(this.responseText);
    console.log(data);
}

Ich sehe die Verwendung datain der React-Komponente nicht, daher kann ich dies nur theoretisch vorschlagen: Warum aktualisieren Sie Ihre Komponente nicht im Rückruf?

Ich habe versucht, dasselbe zu tun, und das hat bei mir funktioniert (ES6 / ES2015):

import myData from './data.json';

Ich habe die Lösung aus dieser Antwort in einem reaktionsnativen Thread erhalten, in dem das Gleiche gefragt wurde: https://stackoverflow.com/a/37781882/176002

Der einfachste und effektivste Weg, eine Datei für Ihre Komponente verfügbar zu machen, ist folgender:

var data = require('json!./data.json');

Beachten Sie das json!vor dem Pfad

1. installieren json-loader:

   npm i json-loader --save

2. dataOrdner erstellen in src:

   mkdir data

3. Legen Sie Ihre Datei (en) dort ab

4. Laden Sie Ihre Datei

   var data = require('json!../data/yourfile.json');

Wenn Sie einige JSON-Dateien haben:

import data from 'sample.json';

Wenn Sie eine der vielen JSON-Dateien dynamisch laden möchten, müssen Sie möglicherweise fetchstattdessen Folgendes verwenden:

fetch(`${fileName}.json`)
  .then(response => response.json())
  .then(data => console.log(data))

Mein JSON-Dateiname: terrifcalculatordata.json

[
    {
      "id": 1,
      "name": "Vigo",
      "picture": "./static/images/vigo.png",
      "charges": "PKR 100 per excess km"
    },
    {
      "id": 2,
      "name": "Mercedes",
      "picture": "./static/images/Marcedes.jpg",
      "charges": "PKR 200 per excess km"
    },
    {
        "id": 3,
        "name": "Lexus",
        "picture": "./static/images/Lexus.jpg",
        "charges": "PKR 150 per excess km"
      }
]

Importieren Sie zuerst oben:

import calculatorData from "../static/data/terrifcalculatordata.json";

dann nach der Rückkehr:

  <div>
  {
    calculatorData.map((calculatedata, index) => {
        return (
            <div key={index}>
                <img
                    src={calculatedata.picture}
                    class="d-block"
                    height="170"
                />
                <p>
                    {calculatedata.charges}
                </p>
            </div>
                  

Sie können Ihre JSON-Datei mithilfe der Webpack-Konfiguration als externe Datei hinzufügen. Dann können Sie diesen JSON in eines Ihrer Reaktionsmodule laden.

Schauen Sie sich diese Antwort an

Wenn Sie die Datei als Teil Ihrer App-Funktionalität laden möchten, ist es am besten, diese Datei einzuschließen und auf sie zu verweisen.

Ein anderer Ansatz besteht darin, nach der Datei zu fragen und sie zur Laufzeit zu laden. Dies kann mit der FileAPI erfolgen . Es gibt auch eine andere Antwort von StackOverflow zur Verwendung: Wie öffne ich eine lokale Festplattendatei mit Javascript?

Ich werde eine leicht modifizierte Version für die Verwendung in React einfügen:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
    this.handleFileSelect = this.handleFileSelect.bind(this);
  }

  displayData(content) {
    this.setState({data: content});
  }

  handleFileSelect(evt) {
    let files = evt.target.files;
    if (!files.length) {
      alert('No file select');
      return;
    }
    let file = files[0];
    let that = this;
    let reader = new FileReader();
    reader.onload = function(e) {
      that.displayData(e.target.result);
    };
    reader.readAsText(file);
  }

  render() {
    const data = this.state.data;
    return (
      <div>
        <input type="file" onChange={this.handleFileSelect}/>
        { data && <p> {data} </p> }
      </div>
    );
  }
}