时间戳

首页 > 解决方案 > 在 React 中导入静态 JSON 数据

javascript - 在 React 中导入静态 JSON 数据

问题描述

我正在尝试将静态 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",

我的代码：

数据/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;

内容.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';

然后在浏览器中显示以下错误。

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

标签： javascriptjsonreactjswebpack

解决方案

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

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

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

编辑：

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

您收到此错误的原因是您尝试访问this功能组件！

推荐阅读