Импортировать статические данные JSON в React

Question

Я пытаюсь загрузить статические данные JSON в свое приложение реакции.Но он не позволяет мне загружать данные.

Я использую веб-пакет версии 4.26.1

Это показывает мне следующую ошибку:

SyntaxError: src/data/movieData.json: Unexpected token, expected ; (2:10)

  1 | {
  2 |     "data": [
    |           ^
  3 |         {
  4 |           "id": 1,
  5 |           "title": "Freed",

Мой код:

data / jsonResponse.json

{
    "data": [
        {
          "id": 1,
          "title": "Freed"
    },
    {
          "id": 2,
          "title": "Fifty"
    }
    ]
}

main.js

import React, { Component } from 'react';
import Content from './Content';
import  jsonResponse from './data/jsonResponse.json';

class Main extends Component {
    render() {
        return (
            <div className="main">
                <Content item={ jsonResponse } />
            </div>
        );
    }
}

export default Main;

Content.js

import React from 'react';

  const Content = () => {
    const movies = this.props.item.data;
      return (
        movies.map(movie => {
            return (
                <span >{movie.title}</span>
            );
         })
        )
}

export default Content;

Отредактировано:

Если я использую js вместо JSON, например:

const movies_data = {
   "data": [
            {
              "id": 1,
              "title": "Freed"
        },
        {
              "id": 2,
              "title": "Fifty"
        }
        ]
    }
export default movies_data;

и в файле Main.js

import  jsonResponse from './data/movieData';

Затем в браузере отображается следующая ошибка.

Невозможно прочитать свойство 'props' из неопределенного

Answer 1

Вам нужно проверить, есть ли в вашей конфигурации Webpack загрузчик для JSON.

Я рекомендую использовать этот загрузчик.https://www.npmjs.com/package/json-loader

Answer 2

Ответ относительно отредактированного вопроса и Cannot read property 'props' of undefined ошибка

Вы не можете получить доступ к this в функциональных компонентах.props передается в качестве аргумента функциональным компонентам, поэтому попробуйте следующее (Content.js file):

import React from 'react';

  const Content = (props) => {
    const movies = props.item.data;
      return (
        movies.map(movie => {
            return (
                <span >{movie.title}</span>
            );
         })
        )
}

export default Content;

Answer 3

Существует 2 обходных пути для загрузки файлов json в файл js.

1. Переименуйте ваш файл json в расширение .js и export default ваш json оттуда.

2. Так как json-loader по умолчанию загружается в веб-пакет> = v2.0.0, нет необходимости изменять настройки веб-пакета.
   Но вам нужно загрузить файл json как json!./data/jsonResponse.json (обратите внимание на json!)

РЕДАКТИРОВАТЬ:

Невозможно прочитать свойства "реквизиты" неопределенных

причина, по которой вы получаете эту ошибку, в том, что вы пытаетесь получить доступ к this на функциональном компоненте!

Answer 4

Вы должны добавить JSON loader для импорта файлов JSON.