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

두 개의 json 파일이있는 경우 :

import data from 'sample.json';

많은 json 파일 중 하나를 동적으로로드하려면 fetch대신 a를 사용해야 할 수 있습니다 .

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>
                  

webpack config를 사용하여 JSON 파일을 외부로 추가 할 수 있습니다. 그런 다음 반응 모듈에서 해당 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>
    );
  }
}