在React中导入静态JSON数据

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文件有两种解决方法。

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

2. 由于默认情况下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加载程序来导入JSON文件。

Answer 4

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

我建议使用这个加载器。https://www.npmjs.com/package/json-loader