Как загрузить локальный JSON в React?

Question

[tron21]

Всем доброго времени суток! У меня стоит задача из локального .json файла загрузить данные в React. Пытаюсь проверить через консоль на локальном сервер и импорт не срабатывает и постоянно вылетает ошибка. Пытался нагуглить решение, но не смог найти подходящий ответ на мой вопрос.

Ниже код самого json файла и после него код app.js Реакта где пытаюсь все осуществить

{
    "result": [
      {
        "_id": "611e5bee6dbecd9b57cd7244",
        "author_firstName": "Ангелина",
        "author_lastName": "Пастернак",
        "title": "Августина и Степан",
        "city": "Санкт-Петербург",
        "year": 2021
      },
      {
        "_id": "611e5beea040b02068815775",
        "author_firstName": "Ангелина",
        "author_lastName": "Пастернак",
        "title": "Армии племен пустыни",
        "city": "Москва",
        "year": 2020
      }
    ]
  }

import logo from '../../logo.svg';
import './App.css';
import data from '../utils/data.json';




function App() {

  const result = JSON.parse(data);
  console.log(result);



  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Заранее спасибо за помощь и извиняюсь если сложность вопроса выбрана некорректно.

Comments

[Gary_Ihar]

Чтобы что-то импортировать, то надо сначала экспортировать

Answer 1

[Sergey Mukhin]

Так за это не React отвечает. Это задача для используемого сборщика, нужно в нём смотреть.
Какой сборщик используется?

Если через CRA было создано (там Webpack), то там всё настроено. Импортировано будет уже как объект, JSON.parse() делать не нужно, это вызовет ошибку SyntaxError.

И кстати да, а ошибка то какая? В ней обычно половина ответа на вопрос.

Comments

[tron21]

Мне нужно научиться внимательней читать документацию. Убрал JSON.parse() и все сработало как надо. Спасибо за помощь .

Answer 2

[Denis Masson]

В файле где хранится JSON:

const variable = {
    "result": [
      {
        "_id": "611e5bee6dbecd9b57cd7244",
        "author_firstName": "Ангелина",
        "author_lastName": "Пастернак",
        "title": "Августина и Степан",
        "city": "Санкт-Петербург",
        "year": 2021
      },
      {
        "_id": "611e5beea040b02068815775",
        "author_firstName": "Ангелина",
        "author_lastName": "Пастернак",
        "title": "Армии племен пустыни",
        "city": "Москва",
        "year": 2020
      }
    ]
  }

export default variable;

и потом уже импортите его в реакте

Comments

[tron21]

Спасибо за ответ, но этот способ я знаю. Я имел ввиду как сделать, если JSON файл оставить так как сделано у меня? Есть какой-то способ использовать его без внутренних изменений для экспорта?

{
    "result": [
      {
        "_id": "611e5bee6dbecd9b57cd7244",
        "author_firstName": "Ангелина",
        "author_lastName": "Пастернак",
        "title": "Августина и Степан",
        "city": "Санкт-Петербург",
        "year": 2021
      },
      {
        "_id": "611e5beea040b02068815775",
        "author_firstName": "Ангелина",
        "author_lastName": "Пастернак",
        "title": "Армии племен пустыни",
        "city": "Москва",
        "year": 2020
      }
    ]
  }