Імпортуйте файл JSON у React

Я новачок у 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'

Будь ласка, збережіть свій файл JSON із розширенням .js і переконайтеся, що ваш JSON повинен бути в тому ж каталозі.

Рішення, яке працювало для мене, полягає в наступному: - Я перемістив файл data.json із src у відкритий каталог. Потім для отримання файлу використовувався 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);
    });

Проблема полягала в тому, що після компіляції програми React запит на пошук шукає файл за 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>

Є кілька способів зробити це без використання стороннього коду або бібліотек (рекомендований спосіб).

1-й СТАТИЧНИЙ ШЛЯХ: створіть файл .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');

з повагою