Загрузка json-данных из локального файла в React JS

У меня есть компонент React, и я хочу загрузить в свои данные JSON из файла. В настоящее время журнал консоли не работает, хотя я создаю переменную datastrong > как глобальную

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

Любые советы по наилучшему пути, предпочтительно "Реагирование", будут очень оценены!

Ответы

Ответ 1

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

Если вы не находитесь в соединении с квантовой запутанностью с нулевой задержкой, это хорошо после того, как все ваши заявления были выполнены. Например, чтобы зарегистрировать полученные данные, вы должны:

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

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

Ответ 2

Я пытался сделать то же самое, и это то, что сработало для меня (ES6/ES2015):

import myData from './data.json';

Я получил решение этого ответа в ответном потоке, задавая одно и то же: fooobar.com/questions/140666/...

Ответ 3

Самый простой и эффективный способ сделать файл доступным для вашего компонента:

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

Обратите внимание на json! до пути

Ответ 4

установить json-loader:

npm я json-loader --save
создайте папку data в src:

mkdir data
положите туда свои файлы
загрузить свой файл

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

Ответ 5

Вы можете добавить свой JSON файл в качестве внешнего, используя конфигурацию webpack. Затем вы можете загрузить этот json в любой из ваших реактивных модулей.

Посмотрите этот ответ

Ответ 6

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

Другой подход - попросить файл и загрузить его во время выполнения. Это можно сделать с помощью 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>
    );
  }
}