在React中导入静态JSON数据

Question

我正在尝试将静态JSON数据加载到我的应用程序中。但是，它不允许我加载数据。

我正在使用webpack 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

在js文件中加载json文件有两种解决方法。

1. 将您的json文件重命名为.js扩展名，然后export default从此处将json 重命名。

2. 由于json-loader默认情况下是在webpack> = v2.0.0上加载的，因此无需更改您的webpack配置。
   但您需要将json文件加载为json!./data/jsonResponse.json（注意json!）

编辑：

无法读取未定义的属性“ props”

出现此错误的原因是，您正在尝试访问this功能组件！