代码之家 › 专栏 › 技术社区 › ketan

在React中导入静态JSON数据

webpack reactjs json javascript

ketan · 技术社区 · 6 年前

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

我使用的是网页包版本4.26.1

它向我显示以下错误:

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

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

我的代码:

{
    "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;

import React from 'react';

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

export default Content;

编辑:

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

在Main.js文件中

import  jsonResponse from './data/movieData';

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

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

4 回复 | 直到 6 年前

Mehrdad Shokri 6 年前

在js文件中加载json文件有两种变通方法。

将json文件重命名为.js扩展名并 export default 你的json就在那里。
自从 json-loader 默认情况下,已加载到网页上>=v2.0.0无需更改您的网页配置。
但您需要将json文件加载为 json!./data/jsonResponse.json json! )

编辑:

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

出现此错误的原因是您试图访问 this 在一个功能组件上!

Bartek Fryzowicz 6 年前

关于编辑的问题和问题的回答 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;