web-dev-qa-db-fra.com

chargement de données JSON depuis un fichier local dans React JS

J'ai un composant React et je souhaite charger mes données JSON à partir d'un fichier. Le journal de la console ne fonctionne pas actuellement, même si je crée la variable data en tant que variable globale.

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

Idéalement, je préférerais faire quelque chose comme ceci, mais cela ne fonctionne pas - il essaie d'ajouter ". Js" à la fin du nom du fichier.

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

Tout conseil sur la meilleure façon, de préférence la méthode "React", serait grandement apprécié!

javascriptajaxjsonxmlhttprequestreactjs
52
Desmond

Vous ouvrez un connexion asynchrone , mais vous avez écrit votre code comme s'il était synchrone. La fonction de rappel reqListener ne sera pas exécutée de manière synchrone avec votre code (c'est-à-dire avant le React.createClass), mais uniquement une fois que votre extrait de code aura été exécuté et que la réponse aura été reçue de votre emplacement distant.

À moins que vous ne soyez sur une connexion à enchevêtrement quantique à latence nulle, c'est bien une fois que toutes vos instructions ont été exécutées. Par exemple, pour enregistrer les données reçues, vous devez:

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

Je ne vois pas l'utilisation de data dans le composant React, je ne peux donc que suggérer ceci théoriquement: pourquoi pas pdate votre composant dans le rappel?

13
John Weisz

J'essayais de faire la même chose et voici ce qui a fonctionné pour moi (ES6/ES2015):

import myData from './data.json';

J'ai eu la solution de cette réponse sur un thread réactif natif demandant la même chose: https://stackoverflow.com/a/37781882/176002

101
rockfakie

Le moyen le plus simple et le plus efficace de mettre un fichier à la disposition de votre composant est le suivant:

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

Notez le json! avant le chemin

21
César

  1. installer json-loader:

    npm i json-loader --save

  2. créer le dossier data dans src:

    mkdir data

  3. mettre votre/vos fichier (s) ici

  4. charger votre fichier

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

9
ChaosPredictor

Vous pouvez ajouter votre fichier JSON en tant qu'externe à l'aide de webpack config. Ensuite, vous pouvez charger ce JSON dans l’un de vos modules de réaction.

Jetez un oeil à cette réponse

0
Rishab Doshi