将本地文件中的 json 数据加载到 React JS 中 [英] loading json data from local file into React JS

问题描述

我有一个 React 组件，我想从文件中加载我的 JSON 数据.控制台日志当前不起作用，即使我将变量 data 创建为全局变量

'使用严格';var React = require('react/addons');//从文件中加载 JSON 数据变量数据；var oReq = new XMLHttpRequest();oReq.onload = reqListener;oReq.open("get", "data.json", true);oReq.send();函数 reqListener(e) {数据 = JSON.parse(this.responseText);}控制台.log(数据)；var List = React.createClass({获取初始状态:函数(){返回{数据:this.props.data}；},渲染:函数(){var listItems = this.state.data.map(function(item) {var eachItem = item.works.work;var photo = eachItem.map(function(url) {返回 (<td>{url.urls}</td>)});});返回 <ul>{listItems}</ul>}});var redBubble = React.createClass({渲染:函数(){返回 (
<列表数据={数据}/></div>);}});module.exports = redBubble;

理想情况下，我更愿意这样做，但它不起作用 - 它会尝试将 ".js" 添加到文件名的末尾.

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

任何关于最佳方式的建议，最好是React"方式，将不胜感激！

解决方案

您正在打开一个 异步连接，但是您已经编写了代码，就好像它是同步的一样.reqListener 回调函数不会与您的代码同步执行(即在 React.createClass 之前)，但只会在您的整个代码段运行并收到响应之后执行从您的远程位置.

除非您处于零延迟的量子纠缠连接上，否则在您的所有语句都运行之后，这是好吧.例如，要记录接收到的数据，您可以:

函数 reqListener(e) {数据 = JSON.parse(this.responseText);控制台.log(数据)；}

我没有在 React 组件中看到 data 的使用，所以我只能从理论上提出这个建议:为什么不在回调中更新您的组件?

I have a React component and I want to load in my JSON data from a file. The console log currently doesn't work, even though I'm creating the variable data as a 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;

Ideally, I would prefer to do it something like this, but it's not working - it tries to add ".js" onto the end of the filename.

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

Any advice on the best way, preferably the "React" way, would be much appreciated!

解决方案

You are opening an asynchronous connection, yet you have written your code as if it was synchronous. The reqListener callback function will not execute synchronously with your code (that is, before React.createClass), but only after your entire snippet has run, and the response has been received from your remote location.

Unless you are on a zero-latency quantum-entanglement connection, this is well after all your statements have run. For example, to log the received data, you would:

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

I'm not seeing the use of data in the React component, so I can only suggest this theoretically: why not update your component in the callback?

这篇关于将本地文件中的 json 数据加载到 React JS 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！