завантаження даних 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;

В ідеалі, я би віддав перевагу зробити щось подібне, але це не працює - він намагається додати ".js" в кінець імені файлу.

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

Будемо дуже вдячні за будь-які поради щодо найкращого способу, бажано "Реагування"!

Ви відкриваєте асинхронне з'єднання , але ви написали свій код так, ніби він був синхронним. Функція reqListenerзворотного виклику не буде виконуватися синхронно з вашим кодом (тобто раніше React.createClass), а лише після того, як запуститься весь ваш фрагмент і відповідь буде отримана з вашого віддаленого місця.

Якщо у вас немає з'єднання з квантовою заплутаністю з нульовою затримкою, це станеться після того, як усі ваші твердження будуть запущені. Наприклад, для реєстрації отриманих даних потрібно:

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

Я не бачу використання dataкомпонента React, тому можу лише запропонувати це теоретично: чому б не оновити ваш компонент у зворотному виклику?

Я намагався зробити те саме, і ось що мені вдалося (ES6 / ES2015):

import myData from './data.json';

Я отримав рішення з цієї відповіді в реакційному потоці, який запитує те саме: https://stackoverflow.com/a/37781882/176002

Найпростіший та найефективніший спосіб зробити файл доступним для вашого компонента:

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

Зверніть увагу json!на шлях до шляху

1. встановити json-loader:

   npm i json-loader --save

2. створити dataпапку в src:

   mkdir data

3. покладіть туди свої файли

4. завантажте файл

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

Якщо у вас є кілька файлів json:

import data from 'sample.json';

Якщо вам потрібно було динамічно завантажувати один із багатьох файлів json, можливо, вам доведеться використовувати fetchзамість:

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

Ім'я мого файлу 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";

то після повернення:

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

Ви можете додати свій файл JSON як зовнішній за допомогою конфігурації webpack. Потім ви можете завантажити цей json в будь-який з ваших модулів реагування.

Погляньте на цю відповідь

Якщо ви хочете завантажити файл, як частину функціональних можливостей вашого додатка, найкращим підходом буде включення та посилання на цей файл.

Інший підхід - запитувати файл і завантажувати його під час виконання. Це можна зробити за допомогою FileAPI . Існує також інша відповідь StackOverflow щодо його використання: Як відкрити файл локального диска за допомогою 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>
    );
  }
}