正在从本地 json 文件中获取数据

Question

我有一个问题，在 React 导入中找不到模块。这是我的 API 来自文件：

[   
    {
        "poolNumber": "1",
        "sender": "Damir",
        "notRoutedReason": "NumberDoesntExist",
        "sentDateTime": "2019-08-13T08:01:48.1535075Z",
        "requestedDeliveryReportMaskText": "Submitted",
        "deliveryReportReceivedDateTime": "2019-08-13T08:01:48.1535075Z",
        "isUnicode": "FALSE",
        "messageUUID": "4889e632-a314-45e2-89fd-35b07b4f9ff2"
    },
    {
        "poolNumber": "1",
        "sender": "Damir",
        "notRoutedReason": "NumberDoesntExist",
        "sentDateTime": "2019-08-13T08:01:46.3254032Z",
        "requestedDeliveryReportMaskText": "Submitted",
        "deliveryReportReceivedDateTime": "2019-08-13T08:01:46.3254032Z",
        "isUnicode": "FALSE",
        "messageUUID": "7f48626f-7dfe-4772-99e6-3a4c1df15e0e"
    }
]

然后我尝试在导入下调用它，以便我可以记录（数据）..

import React from 'react'

import dataJSON from './data.json'
    const getData = async () => {
        const response = await fetch(dataJSON)
        const data = await response;
        return getData
    }

但我无法获取数据，因为它没有获取我需要的模块。我该如何解决这个问题？

Answer 1

要使用 import 和 export 语句，您必须使用 es6，为此，需要 babal。

也许您需要将 babel-plugin-import 添加到您的项目中：read if you have and how to install and configure here here)

Answer 2

如果您使用的是 Create React App，这应该可以正常工作：

import dataJSON from './data.json'

console.log(dataJSON )

Answer 3

您可以为浏览器使用基于 axios / Promise 的 HTTP 客户端，并 node.js 在 React componentDidMount 生命周期方法中处理请求。

https://github.com/axios/axios

但我同意在 CreatReactApp 中更容易：

import info from './data.json';

Answer 4

如果您使用的是 create-react-app，只需导入

import dataJson from './dataJson.json';

请看我的沙盒import json in react app

Answer 5

Tnx 所有试图帮助我的人，但我的解决方案是将 .json 文件放入 public 文件夹，然后将其导入 App.js... 这样引擎就没有了t trow 错误，我用 async/await.

解决了它

正在从本地 json 文件中获取数据

Fetching data from local json file

javascript

json

asynchronous

reactjs

fetch-api