cargar datos json del archivo local en React JS

Desmond:

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!

John Weisz:

Está abriendo una conexión asincrónica , pero ha escrito su código como si fuera síncrono. La reqListenerfunción de devolución de llamada no se ejecutará sincrónicamente con su código (es decir, antes 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 dataen el componente React, por lo que solo puedo sugerir esto teóricamente: ¿por qué no actualizar su componente en la devolución de llamada?

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

Intentando cargar el archivo JSON local para mostrar datos en una página html usando JQuery

¿Cómo recuperar datos del archivo JSON local en react native?

Cargar archivo json en python

Obteniendo datos del archivo JSON local en angularjs

Node.js cómo eliminar / editar datos dentro del archivo json en el servidor

Select2 cargar datos del archivo json local

Select2 cargar datos del archivo json local

Cargue dinámicamente datos del proyecto desde un archivo JSON en React

No se pueden leer datos del archivo JSON en la carpeta local en Angular 7

Cómo obtener la URL de la imagen del archivo Json local en React.js

Cargar archivo local de datos con fecha

Cargar y mostrar datos json en el componente react

¿Cómo cargar un archivo de datos json en una variable en el marco del robot? con

¿Cómo cargar un archivo de datos json en una variable en el marco del robot? con

No se pueden cargar datos del archivo json local usando jQuery

Recorrer los datos del archivo JSON local para generarlos en HTML

Obtener datos del archivo local

Cargar el contenido del archivo json en Node js / Mochausing requiere que el módulo pase el nombre del archivo dinámicamente

¿Cómo adjuntar datos del archivo JS local al estado en ReactJS?

Retrasar la carga de datos json desde un archivo local en React JS

Cargar un archivo CSV o Excel junto con datos json a través del formulario React html a Django

Mostrar datos del archivo local JSON en HTML

No se puede cargar el archivo en React js webapi MVC

Problemas para cargar datos del archivo JSON en la tabla HTML con la función js

Cómo retrasar el retorno en React.js para cargar datos desde JSON

El archivo js local no se puede cargar en springboot

Extraer datos del archivo JSON en R

Cargar archivo JSON en Elasticsearch

extraer datos del archivo json en excel

TOP Lista

CalienteEtiquetas

Archivo