Question

我在React import中找不到模块存在问题。这是文件中的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

要使用导入和导出语句，必须使用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文件放在公用文件夹中，然后将其导入App.js中... Way引擎没有抛出错误，因此我用async / await解决了它。

从本地json文件中获取数据

5 个答案: