从本地 json 文件中获取数据

Posted 2023-02-27

【中文标题】从本地 json 文件中获取数据

【英文标题】：Fetching data from local json file

【发布时间】：2020-03-24 08:23:03

【问题描述】：

我在 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
    

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

【问题讨论】：

您使用的是什么捆绑器？例如，create-react-app 使用 webpack + 一些配置，应该可以让您轻松导入 json

我认为你不需要使用 fetch 来导入本地 json 文件。

How to import a json file in ecmascript 6?的可能重复

我正在使用来自 create-react-app 的 webpack... 是否有一些解决方案可以修复导入 json 文件的配置...

@messerbill 尝试了该解决方案.. 并得到错误 Expected a JSON object, array or literal.

【参考方案1】：

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

import dataJSON from './data.json'

console.log(dataJSON )

【讨论】：

不起作用...它给我一个错误说它找不到模块...但是如果我声明带有 js 扩展名的文件并导出默认 dataJSON...

这很奇怪，通常安装'json-loader'模块可以解决这个问题，但是CRA已经有了，可能你使用的是旧版本的CRA，试试npm install --save-dev json-loader

是否已经...但是有同样的错误...我将它作为一个js文件来做，然后只导出默认的let dataJSON并在组件中对其进行字符串化...这是一个很好的解决方案?

是的，这行得通，但这不是你想要的:)

不是，但我厌倦了试图找出为什么它不能正常工作...... :)

【参考方案2】：

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

https://github.com/axios/axios

但我同意在 CreatReactApp 中更容易做到：

import info from './data.json';

【参考方案3】：

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

import dataJson from './dataJson.json';

请看我的沙盒import json in react app

【讨论】：

它没有将 JSON 视为一个模块...我首先尝试过，知道它应该是什么以及如何工作，但它没有...

【参考方案4】：

Tnx all 试图帮助我，但我的解决方案是将 .json 文件放在公用文件夹中，然后将其导入 App.js...Way 引擎没有引发错误，我使用 async/await 解决了它。

【参考方案5】：

对于使用导入和导出语句，你必须使用es6，为此，需要babal。

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

【讨论】：

我已经通过使用 react-create-app 创建一个应用安装了 babel，所以不是这样...