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!
Está abriendo una conexión asincrónica , pero ha escrito su código como si fuera síncrono. La reqListener
funció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 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?
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
Déjame decir algunas palabras