React에서 JSON 파일 가져 오기

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

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

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

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

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;

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

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'이 있다고 가정 해 보겠습니다.

[{
  "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

// .json 파일의 이름을 .js로 바꾸고 src 폴더에 보관

json 객체를 변수로 선언

var customData = {
   "key":"value"
};

module.exports를 사용하여 내보내기

module.exports = customData;

필요한 구성 요소에서 두 개의 폴더를 깊이 제거하십시오.

import customData from '../customData';

이것은 잘 작동했습니다 React 16.11.0

// in customData.js
export const customData = {
  //json data here
  name: 'John Smith',
  imgURL: 'http://lorempixel.com/100/100/',
  hobbyList: ['coding', 'writing', 'skiing']
}

// in index.js
import { customData } from './customData';

// example usage later in index.js
<p>{customData.name}</p>

타사 코드 나 라이브러리를 사용하지 않고이를 수행하는 여러 가지 방법이 있습니다 (권장되는 방법).

첫 번째 정적 방법 : .json 파일을 만든 다음 반응 구성 요소 예제에서 가져옵니다.

내 파일 이름은 "example.json"입니다.

{"example" : "my text"}

example.json 내부의 예제 키는 향후 문제를 방지하기 위해 큰 따옴표를 사용하는 것을 염두에두면 무엇이든 될 수 있습니다.

반응 컴포넌트로 가져 오는 방법

import myJson from "jsonlocation";

이런 곳 어디에서나 사용할 수 있습니다

myJson.example

이제 고려해야 할 몇 가지 사항이 있습니다. 이 방법을 사용하면 페이지 상단에서 가져 오기를 선언해야하며 동적으로 가져올 수 없습니다.

이제 JSON 데이터를 동적으로 가져 오려면 어떻게해야합니까? 다국어 지원 웹 사이트의 예?

2 동적 방식

먼저 위의 예와 똑같이 JSON 파일을 선언하십시오.

하지만 이번에는 데이터를 다르게 가져옵니다.

let language = require('./en.json');

동일한 방식으로 액세스 할 수 있습니다.

하지만 동적 부하가 어디 있는지 기다려?

다음은 JSON을 동적으로로드하는 방법입니다.

let language = require(`./${variable}.json`);

이제 모든 JSON 파일이 동일한 디렉토리 내에 있는지 확인하십시오.

여기서 첫 번째 예제와 동일한 방식으로 JSON을 사용할 수 있습니다.

myJson.example

무엇이 바뀌 었습니까? 가져 오는 방법은 우리에게 정말로 필요한 유일한 것입니다.

이게 도움이 되길 바란다.

var langs={
  ar_AR:require('./locale/ar_AR.json'),
  cs_CZ:require('./locale/cs_CZ.json'),
  de_DE:require('./locale/de_DE.json'),
  el_GR:require('./locale/el_GR.json'),
  en_GB:require('./locale/en_GB.json'),
  es_ES:require('./locale/es_ES.json'),
  fr_FR:require('./locale/fr_FR.json'),
  hu_HU:require('./locale/hu_HU.json')
}
module.exports=langs;

모듈에서 필요합니다.

let langs=require('./languages');

문안 인사