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

Question 1

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”방법에 대한 조언을 주시면 감사하겠습니다!

Question 2

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

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

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

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

Question 3

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

import myData from './data.json';

나는 같은 것을 묻는 반응 네이티브 스레드에 대한이 답변에서 해결책을 얻었습니다 : https://stackoverflow.com/a/37781882/176002

Question 4

구성 요소에서 파일을 사용할 수 있도록하는 가장 간단하고 효과적인 방법은 다음과 같습니다.

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

json!경로 앞에 유의하십시오.

Question 5

설치 json-loader:

npm i json-loader --save
에 data폴더 만들기 src:

mkdir data
거기에 파일을 넣어
파일로드

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

Question 6

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

import data from 'sample.json';

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

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

Question 7

내 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>

Question 8

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

이 답변을 보세요