在REACTE with data format错误中导入JSON文件

我试图在React项目中导入JSON文件，但出现解析错误：

json file:testData.json
  {
    "data": {
      "articles": [
            {
            "id": "95c12a8f6c88953ca8f8a39da25546e6",
            "title": "Introducing React's Error Code System",
            "date": "Mon Jul 11 2016 00:00:00 GMT+0000 (UTC)",
            "authorId": "2c6aa2cfe3449467d329fa17d6ea230f",
            "body": "Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire."
             }
          ],
       "authors": [
            {
             "id": "d85577ea34ae50f2dac5347b5219aa23",
             "firstName": "Andrew",
             "lastName": "Clark",
             "website": "https://twitter.com/acdlite"
            }
         ]
      }
    }

DataApi.js文件：

export default class DataApi {
// property: rawData
  constructor(rawData) {
   this.rawData = rawData;
 }

   mapIntoObject(arr) {
      return arr.reduce((acc, curr) => {
      acc[curr.id] = curr;
      return acc;
      }, {});
    }
   getArticle() {
      return this.mapIntoObject(this.rawData.articles);
   }
   getAuthors() {
      return this.mapIntoObject(this.rawData.authors);
   }
 }

我尝试在这个文件中导入JSON数据：

import DataApi from "./DataApi"; // object to process data
import { data } from "./testData.json"; // raw data

// create a api object to host raw data
let api = new DataApi(data);

const articles = api.getArticle();

console.log(articles);

然后我得到了错误：（导入目录是正确的）：

---

问题是什么？

您必须导出json数据，您的json数据应该是这样的

export const data = {
"data": {
  "articles": [
        {
        "id": "95c12a8f6c88953ca8f8a39da25546e6",
        "title": "Introducing React's Error Code System",
        "date": "Mon Jul 11 2016 00:00:00 GMT+0000 (UTC)",
        "authorId": "2c6aa2cfe3449467d329fa17d6ea230f",
        "body": "Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire."
        }
      ],
  "authors": [
        {
        "id": "d85577ea34ae50f2dac5347b5219aa23",
        "firstName": "Andrew",
        "lastName": "Clark",
        "website": "https://twitter.com/acdlite"
        }
    ]
  }
}

导入时将

.json

更改为

.js

扩展

import { data } from "./testData"; // raw data

---

您可以进行默认导出

testData.json:

const data = {
"data": {
  "articles": [
        {
        "id": "95c12a8f6c88953ca8f8a39da25546e6",
        "title": "Introducing React's Error Code System",
        "date": "Mon Jul 11 2016 00:00:00 GMT+0000 (UTC)",
        "authorId": "2c6aa2cfe3449467d329fa17d6ea230f",
        "body": "Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire."
        }
      ],
  "authors": [
        {
        "id": "d85577ea34ae50f2dac5347b5219aa23",
        "firstName": "Andrew",
        "lastName": "Clark",
        "website": "https://twitter.com/acdlite"
        }
    ]
  }
}

export default data;

在导入时

安装后，您可以使用

import data from "./testData.json";

或者，如果您已使用create react app构建项目框架，则该模块已包含在内，您只需导入json：

import data from "./testData";

安装

并将下面的配置添加到webpack.config.js

module.exports = {
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  }
}

webpack.config.js

module.exports = {
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  }
}

---

我从在线api中自动复制了数据，并将数据存储在testData.json文件中。我只想直接导入json数据，而不更改testData.json。然而，我尝试了一些方法，但没有奏效。你有更好的主意吗？谢谢在这种情况下使用json加载程序->

module.exports = {
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  }
}