Javascript 将json数据从本地文件加载到React JS

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

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

任何关于最佳方式的建议，最好是“反应”方式，将不胜感激

您正在打开一个，但您编写的代码好像是同步的。

reqListener

回调函数将不会与代码同步执行（即在

React.createClass

之前），而是仅在整个代码段运行并且从远程位置收到响应后执行

除非你是在一个零延迟量子纠缠连接上，否则在你所有的语句都运行之后，这是很好的。例如，要记录接收到的数据，您可以：

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

---

我没有看到React组件中使用

数据，因此我只能从理论上提出建议：为什么不在回调中更新您的组件？
使组件可以使用文件的最简单、最有效的方法是：

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

注意
json在路径之前
我尝试做同样的事情，这对我来说很有效（ES6/ES2015）：

我从react本机线程的回答中得到了解决方案，问了同样的问题：

安装json加载程序
：
npmijson加载程序——保存

在
src
中创建
data
文件夹：
mkdir数据

把你的档案放在那里


加载您的文件：


var data=require（'json！。/data/yourfile.json'）；
您可以使用webpack配置将JSON文件添加为外部文件。然后，您可以在任何react模块中加载该json

查看一下
如果您想加载该文件，作为应用程序功能的一部分，那么最好的方法是包含并引用该文件

另一种方法是请求文件，并在运行时加载它。这可以通过。关于使用它，还有另一个StackOverflow答案：

我将包括一个稍加修改的版本，以便在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>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：空
};
this.handleFileSelect=this.handleFileSelect.bind（this）；
}
显示数据（内容）{
this.setState（{data:content}）；
}
handleFileSelect（evt）{
让files=evt.target.files；
如果（！files.length）{
警报（“无文件选择”）；
返回；
}
让file=files[0]；
让那=这；
let reader=new FileReader（）；
reader.onload=函数（e）{
显示数据（如target.result）；
};
reader.readAsText（文件）；
}
render（）{
const data=this.state.data；
返回(
{data&{data}
}
);
}
}
如果您有两个json文件：

import data from 'sample.json';

如果要动态加载多个json文件中的一个，可能需要使用
获取
：

fetch(`${fileName}.json`)
  .then(response => response.json())
  .then(data => console.log(data))

我的JSON文件名：TerraCalculatorData.JSON

[
    {
      "id": 1,
      "name": "Vigo",
      "picture": "./static/images/vigo.png",
      "charges": "PKR 100 per excess km"
    },
    {
      "id": 2,
      "name": "Mercedes",
      "picture": "./static/images/Marcedes.jpg",
      "charges": "PKR 200 per excess km"
    },
    {
        "id": 3,
        "name": "Lexus",
        "picture": "./static/images/Lexus.jpg",
        "charges": "PKR 150 per excess km"
      }
]

首先，在顶部导入：

import calculatorData from "../static/data/terrifcalculatordata.json";

返回后：

  <div>
  {
    calculatorData.map((calculatedata, index) => {
        return (
            <div key={index}>
                <img
                    src={calculatedata.picture}
                    class="d-block"
                    height="170"
                />
                <p>
                    {calculatedata.charges}
                </p>
            </div>
                  


{
calculatorData.map（（calculatedata，index）=>{
返回(

{calculatedata.charges}

console.log

工作正常，您只是在调用

reqListener

之前调用它。感谢您的回复。在代码中，它在reqListener之后出现，所以我不确定我是否理解。您能详细说明一下吗？您的Ajax请求需要时间。JavaScript不会等到请求完成后再继续o下一条指令（因为请求可能需要几分钟甚至几小时才能完成）。我们称之为“异步”（有时是“非阻塞”）执行被调用，

控制台。log

被调用…一段时间后，Ajax请求完成并调用了

reqListener

。如果您希望仅在Ajax请求完成后发生某些事情，则必须在

reqListener

中实现这些事情。感谢Jordan的可能副本，现在就有意义了。谢谢感谢您花时间解释和其他链接。我试图将所有React代码移到reqListener中，这样它就可以在回调中工作，但这似乎是个坏主意。是否有办法在运行其余代码之前等待响应？再次感谢。非常感谢您的帮助John。我一直在研究如何更新e组件在回调中，但运气不太好。这与状态有关吗？我还是一个反应新手！我已经更新了代码以显示组件如何工作-您能告诉我如何在回调中传递数据吗？再次感谢！@Desmond是的，状态可以工作，因为组件状态更改时将重新调用。

zero latency quantum Engulation connection

如果您在webpack中使用此方法，则需要json加载程序来加载导入的json文件。谢谢！我一直在寻找一种在JSX中访问json数据的简单方法，正是这种方法！请注意，这将把json编译到捆绑包中，使热交换json文件成为不可能。这可能是错误的对于很多用例来说都是e，但不是我的。这个答案应该被标记为最准确的答案，但是使用

json加载程序
package example对我有效。我正在使用rollup。以前有
var data=import（'./data.json'））
导入了一个承诺。将其更改为“/data.json”中的
导入数据可以直接访问导入的对象。除非为此添加库，否则这将不起作用。因为React中默认不支持此操作。示例库：-
json loader
包含在较新的网页包版本中，我相信，但您可以仍然需要在您的网页配置中添加一些内容才能使用该e
import calculatorData from "../static/data/terrifcalculatordata.json";

  <div>
  {
    calculatorData.map((calculatedata, index) => {
        return (
            <div key={index}>
                <img
                    src={calculatedata.picture}
                    class="d-block"
                    height="170"
                />
                <p>
                    {calculatedata.charges}
                </p>
            </div>