javascript - open - cargando datos json del archivo local en React JS

load json with js

Question

Tengo un componente React y quiero cargar mis datos JSON desde un archivo. El registro de la consola actualmente no funciona, aunque estoy creando los datos variables como un archivo global

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

Idealmente, preferiría hacer algo como esto, pero no funciona: intenta agregar ".js" al final del nombre de archivo.

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

¡Cualquier consejo sobre la mejor manera, preferiblemente la forma de "Reaccionar", sería muy apreciado!

Answer 1

1. instalar json-loader :

   npm i json-loader --save

2. crear carpeta de data en src :

   mkdir data

3. poner su archivo (s) allí

4. carga tu archivo

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

Answer 2

Está abriendo una conexión asincrónica , pero ha escrito su código como si fuera síncrono. La función de devolución de llamada reqListener no se ejecutará sincrónicamente con su código (es decir, antes de React.createClass ), sino solo después de que se haya ejecutado todo su fragmento y se haya recibido la respuesta desde su ubicación remota.

A menos que esté en una conexión de enredo cuántico de latencia cero, esto es mucho después de que se hayan ejecutado todas sus declaraciones. Por ejemplo, para registrar los datos recibidos, debería:

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

No veo el uso de data en el componente React, por lo que solo puedo sugerir esto teóricamente: ¿por qué no actualizar su componente en la devolución de llamada?

Answer 3

Estaba tratando de hacer lo mismo y esto es lo que funcionó para mí (ES6 / ES2015):

import myData from ''./data.json'';

Obtuve la solución de esta respuesta en un hilo reactivo nativo que preguntaba lo mismo: https://.com/a/37781882/176002

Answer 4

La forma más simple y efectiva de hacer que un archivo esté disponible para su componente es esta:

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

Tenga en cuenta el json! antes del camino

Answer 5

Puede agregar su archivo JSON como externo utilizando la configuración del paquete web. Luego puede cargar ese json en cualquiera de sus módulos de reacción.

Mira esta respuesta

Answer 6

Si desea cargar el archivo, como parte de la funcionalidad de su aplicación, el mejor enfoque sería incluir y hacer referencia a ese archivo.

Otro enfoque es solicitar el archivo y cargarlo durante el tiempo de ejecución. Esto se puede hacer con FileAPI . También hay otra respuesta de sobre su uso: ¿Cómo abrir un archivo de disco local con Javascript?

Incluiré una versión ligeramente modificada para usarlo en React:

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