Question

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

我正在使用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文件有两种解决方法。

将您的json文件重命名为.js扩展名，然后export default从此处进行json。
由于json-loader默认是在Webpack> = v2.0.0上加载的，因此无需更改Webpack的配置。
但是您需要将您的json文件加载为json!./data/jsonResponse.json（请注意json!）

编辑：

无法读取未定义的属性'props

出现此错误的原因是因为您试图访问功能组件上的this！

Answer 2

有关已编辑问题和Cannot read property 'props' of undefined错误的答案

您无法访问功能组件中的this。 props作为参数传递给功能组件，因此请尝试使用此文件（Content.js）：

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

您必须添加JSON loader才能导入json文件。

Answer 4

您需要检查Webpack配置中是否存在JSON加载程序。

我建议使用此装载程序。 https://www.npmjs.com/package/json-loader

在React中导入静态JSON数据

4 个答案: