로컬 파일에서 React JS로 json 데이터로드

로컬 파일에서 React JS로 json 데이터로드

---

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

최선의 방법, 가급적 "React"방법에 대한 조언을 주시면 감사하겠습니다!

---

비동기 연결을 열고 있지만 동기식 인 것처럼 코드를 작성했습니다. reqListener콜백 함수 (즉, 이전 코드와 동 기적으로 실행되지 않습니다 React.createClass)하지만 전체 조각은 실행 한 후에 만하고 응답은 원격 위치에서 수신 된.

당신이 제로 대기 시간이 양자 얽힘의 연결을 사용하지 않는 한,이는 잘 모든 문을 실행 한 후. 예를 들어 수신 된 데이터를 기록하려면 다음을 수행합니다.

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

dataReact 컴포넌트에서 의 사용 이 보이지 않으므로 이론적으로 만 제안 할 수 있습니다 . 콜백에서 컴포넌트를 업데이트 하지 않는 이유 는 무엇입니까?

---

나는 똑같은 일을하려고 노력했고 이것이 나를 위해 일한 것입니다 (ES6 / ES2015).

import myData from './data.json';

I got the solution from this answer on a react-native thread asking the same thing: https://stackoverflow.com/a/37781882/176002

---

The simplest and most effective way to make a file available to your component is this:

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

Note the json! before the path

---

1. install json-loader:

   npm i json-loader --save

2. create data folder in src:

   mkdir data

3. put your file(s) there

4. load your file

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

---

You could add your JSON file as an external using webpack config. Then you can load up that json in any of your react modules.

Take a look at this answer

---

If you want to load the file, as part of your app functionality, then the best approach would be to include and reference to that file.

Another approach is to ask for the file, and load it during runtime. This can be done with the FileAPI. There is also another StackOverflow answer about using it: How to open a local disk file with Javascript?

I will include a slightly modified version for using it in 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>
    );
  }
}

ReferenceURL : https://stackoverflow.com/questions/31758081/loading-json-data-from-local-file-into-react-js