로컬 파일에서 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';

나는 같은 것을 묻는 반응 네이티브 스레드에 대한이 답변에서 해결책을 얻었습니다 : 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');

---

webpack config를 사용하여 JSON 파일을 외부로 추가 할 수 있습니다. 그런 다음 반응 모듈에서 해당 json을로드 할 수 있습니다.

이 답변을 보세요

---

앱 기능의 일부로 파일을로드하려는 경우 가장 좋은 방법은 해당 파일을 포함하고 참조하는 것입니다.

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