問題描述

我有一個 React 組件，我想從文件中加載我的 JSON 數(shù)據(jù).控制臺日志當(dāng)前不起作用，即使我將變量 data 創(chuàng)建為全局變量

'使用嚴(yán)格';var React = require('react/addons');//從文件中加載 JSON 數(shù)據(jù)變量數(shù)據(jù)；var oReq = new XMLHttpRequest();oReq.onload = reqListener;oReq.open("get", "data.json", true);oReq.send();函數(shù) reqListener(e) {數(shù)據(jù) = JSON.parse(this.responseText);}控制臺.log(數(shù)據(jù))；var List = React.createClass({獲取初始狀態(tài):函數(shù)(){返回{數(shù)據(jù):this.props.data}；},渲染:函數(shù)(){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({渲染:函數(shù)(){返回 (
<列表數(shù)據(jù)={數(shù)據(jù)}/></div>);}});module.exports = redBubble;

理想情況下，我更愿意這樣做，但它不起作用 - 它會嘗試將 ".js" 添加到文件名的末尾.

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

任何關(guān)于最佳方式的建議，最好是React"方式，將不勝感激！

您正在打開一個 異步連接，但是您已經(jīng)編寫了代碼，就好像它是同步的一樣.reqListener 回調(diào)函數(shù)不會與您的代碼同步執(zhí)行(即在 React.createClass 之前)，但只會在您的整個代碼段運行并收到響應(yīng)之后執(zhí)行從您的遠(yuǎn)程位置.

除非您處于零延遲的量子糾纏連接上，否則在您的所有語句都運行之后，這是好吧.例如，要記錄接收到的數(shù)據(jù)，您可以:

函數(shù) reqListener(e) {數(shù)據(jù) = JSON.parse(this.responseText);控制臺.log(數(shù)據(jù))；}

我沒有在 React 組件中看到 data 的使用，所以我只能從理論上提出這個建議:為什么不在回調(diào)中更新您的組件?

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?

這篇關(guān)于將本地文件中的 json 數(shù)據(jù)加載到 React JS 中的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！