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

Question

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

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

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

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

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

Answer 1

您正在打开一个 asynchronous connection，但您编写的代码就好像它是同步的。 reqListener 回调函数不会与您的代码同步执行（即在 React.createClass 之前），而是仅在您的整个代码段具有运行并且已从您的远程位置接收到响应之后.

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

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

我没有在 React 组件中看到 data 的使用，所以我只能从理论上建议：为什么不 update 你的组件在回调中？

Answer 2

使文件对您的组件可用的最简单、最有效的方法是：

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

注意路径前的json!

Answer 3

我试图做同样的事情，这对我有用 (ES6/ES2015):

import myData from './data.json';

我从反应本机线程上的这个答案中得到了解决方案，询问同样的事情：

Answer 4

安装json-loader:

npm i json-loader --save

在 src 中创建 data 文件夹：

mkdir data

将您的文件放在那里。
加载您的文件：

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

Answer 5

您可以使用 webpack 配置将 JSON 文件添加为外部文件。然后你可以在你的任何反应模块中加载 json。

看看

Answer 6

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

另一种方法是请求文件，并在运行时加载它。这可以通过 FileAPI 来完成。还有另一个关于使用它的 Whosebug 答案： How to open a local disk file with Javascript?

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

Answer 7

如果您有几个 json 个文件：

import data from 'sample.json';

如果您要动态加载多个 json 文件之一，您可能必须改用 fetch：

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

Answer 8

我的JSON文件名：terrifcalculatordata.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";

然后在 return 之后：

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

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

loading json data from local file into React JS

javascript

ajax

json

xmlhttprequest

reactjs