如何导入 json 数据文件并在反应组件中使用它？答案

【问题标题】：how to import json data file and use it in a react component?如何导入 json 数据文件并在反应组件中使用它？
【发布时间】：2021-06-09 19:09:38
【问题描述】：

我是新手，对如何导入、导出和渲染组件感到困惑。我有一个 fakeData.json 文件，位于与我要渲染的组件相同的 src/components 文件夹中。这是 index.html

  <body>
    <div id="root"></div>
  </body>

这里是 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

这里是 app.js

import './App.css';
import './components/WatchlistTable.js';
import 'rsuite/lib/styles/index.less';

  function App() {
    return <WatchlistTable />
  }
export default App;

这是我在 src/components/WatchlistTable.js 中感到困惑的地方。这是一个 rsuite 表。我尝试导入位于同一组件文件夹中的 fakeData.json 文件，如下所示：从“fakeData.json”导入 fakeData；但它会给出类似“找不到模块：无法解析 fakeData.json”的错误。所以我尝试了另一种方式。

import {fakeData} from 'fakeData.json';

但它给出了同样的错误。在 Visual Studio Code 编辑器中，我注意到如下消息：“公用文件夹中没有 fakeData.json。”

所以我复制了一份并放在那里。现在 VSC 错误消失了，但其他错误仍然存在。 fakeData.json 文件如下所示：

[
    {
      "id": 1,
      "avartar": "url/128.jpg",
      blah blah blah...
    },
]

所以我尝试了另一种方式。我将组件文件夹中的 fakeData.json 更改为 fakeData.js 并添加

const fakeData = [

但同样的错误。所以我尝试：

const fakeData = require('fakeData.js');

但同样的错误。有什么建议吗？

编辑：根据 Ridik，我现在在 WatchlistTable.js 中有这个

 import React from 'react';
 import fakeData from 'fakeData';

我有

export default fakeData;

在 fakeData.js 文件的末尾。但仍然得到同样的错误： ./src/components/WatchlistTable.js

找不到模块：无法解析“fakeData” 'C:\Users\Greg\Projects\react-demos\backtester-rsuite\src\components'

【问题讨论】：

标签： javascript json reactjs

【解决方案1】：

你不能在 react 中直接从 JSON 文件中导入你的 json 数组。为此，您必须将 JSON 数组存储在一个变量中，然后将 export default 存储在您的 JSON 数组中。通过这样做，您可以轻松地在您的组件中 import 它。

FakeData.js

const fakeData = [
    {
      "id": 1,
      "avartar": "url/128.jpg",
      blah blah blah...
    },
]


export default fakeData // you must export it to use in another file.

然后在任何组件中使用它

import fakeData from './Destination_of_file/fakeData.js' 

or

Way 2 // recomended
import fakeData from './Destination_of_file/fakeData'

【讨论】：

仍然收到相同的错误：./src/components/WatchlistTable.js 未找到模块：无法解析 'C:\Users\Greg\Projects\react-demos\backtester 中的 'fakeData' -rsuite\src\components'
我在编辑部分发布了您的建议
你的路线错了……目的地应该是“./fakedata”。如果文件在同一文件夹中，请在写入文件名之前包含“./”。
是的，解决了它。现在它起作用了。不知道为什么，它与 Watchlist.js 在同一个文件夹中。奇怪的。谢谢 Ritik！
因为您没有在 React 或任何 Js 代码中编写完整路径。它们的根文件夹是带有 NodeModules 的文件夹。更多信息请点击这里medium.com/@baintonw/…