[javascript] React에서 JSON 파일 가져 오기

Program / 글쓴이

저는 React를 처음 사용 DATA하고 외부 파일에서 JSON 변수 를 가져 오려고 합니다. 다음과 같은 오류가 발생합니다.

“./customData.json”모듈을 찾을 수 없습니다.

누군가 나를 도울 수 있습니까? 내 DATA변수 가 있으면 작동 index.js하지만 외부 JSON 파일에 있으면 작동 하지 않습니다.

index.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import customData from './customData.json';
import Profile from './components/profile';
import Hobbies from './components/hobbies';

class App extends Component {
  render() {
    return (
      <div>
        <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} />
        <Hobbies hobbyList={this.props.profileData.hobbyList}/>
      </div>
    );
  }
}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container'));

hobbies.js

import React, {Component} from 'react';

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby, index){
        return (<li key={index}>{hobby}</li>);
    });
    return (
        <div>
            <h5>My hobbies:</h5>
            <ul>
                {hobbies}
            </ul>
        </div>
    );
  }
});

export default Hobbies;

profile.js

import React from 'react';

var Profile = React.createClass({
render: function(){
    return (
        <div>
            <h3>{this.props.name}</h3>
            <img src={this.props.imgUrl} />
        </div>
    )
  }
});

export default Profile

customData.json

var DATA = {
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}

export default DATA

답변

한 가지 좋은 방법 (데이터 및 구성 용이 아닌 코드 용 가짜 .js 확장자를 추가하지 않고)은 json-loader모듈 을 사용하는 것 입니다. create-react-app프로젝트를 스캐 폴딩 하는 데 사용했다면 모듈이 이미 포함되어 있으므로 json을 가져 오면됩니다.

import Profile from './components/profile';

이 답변은 더 많은 것을 설명합니다.

답변

이 낡은 밤 …

요컨대 require를 사용하고 노드가 require 호출의 일부로 구문 분석을 처리하도록해야하며 타사 모듈에 아웃소싱하지 않아야합니다. 또한 구성이 방탄이되도록주의해야합니다. 즉, 반환 된 데이터를주의 깊게 확인해야합니다.

그러나 간결함을 위해 다음 예제를 고려하십시오.

예를 들어, 내 앱의 루트에 다음을 포함하는 구성 파일 ‘admins.json’이 있다고 가정 해 보겠습니다.

admins.json

[{
  "userName": "tech1337",
  "passSalted": "xxxxxxxxxxxx"
}]

인용 된 키 "userName", "passSalted"!

다음을 수행하고 파일에서 데이터를 쉽게 가져올 수 있습니다.

let admins = require('~/app/admins.json');
console.log(admins[0].userName);

이제 데이터가 들어 있고 일반 (또는 배열) 개체로 사용할 수 있습니다.

답변

으로 json-loader설치, 당신은 사용할 수 있습니다

import customData from '../customData.json';

또는 더 간단하게

import customData from '../customData';

설치하기 위해서 json-loader

npm install --save-dev json-loader

답변

가장 간단한 접근 방식은 다음과 같습니다. 

// Save this as someJson.js
const someJson = {
  name: 'Name',
  age: 20
}

export default someJson

그때 

import someJson from './someJson'

답변

확장자가 .js 인 JSON 파일을 저장하고 JSON이 동일한 디렉토리에 있어야합니다.

답변

나를 위해 일한 해결책은 다음과 같습니다 .- data.json 파일을 src에서 공용 디렉토리로 옮겼습니다. 그런 다음 fetch API를 사용하여 파일을 가져 왔습니다.

fetch('./data.json').then(response => {
      console.log(response);
      return response.json();
    }).then(data => {
      // Work with JSON data here
      console.log(data);
    }).catch(err => {
      // Do something for an error here
      console.log("Error Reading data " + err);
    });

문제는 반응 앱을 컴파일 한 후 가져 오기 요청 이 실제로 내 반응 앱의 공개 디렉토리 인 URL ” http : // localhost : 3000 / data.json ” 에서 파일을 찾는다는 것입니다 . 그러나 불행히도 반응 앱 data.json 파일을 컴파일하는 동안 src에서 공용 디렉토리로 이동하지 않습니다. 따라서 data.json 파일을 src에서 공개 디렉토리로 명시 적으로 이동해야합니다.

답변

export default DATA또는 시도module.exports = DATA