如何从 React 的一个目录中获取多个 JSON 文件？答案

【问题标题】：How can I fetch multiple JSON files from one directory in React?如何从 React 的一个目录中获取多个 JSON 文件？
【发布时间】：2022-01-13 16:54:22
【问题描述】：

这是一个反应项目。我在 src 中有一个文件夹名称数据，其中有多个 JSON 文件。现在我需要从数据目录中获取所有 JSON 文件，但问题是我不知道 JSON 文件的名称，那么如何从 React 中的数据文件夹中获取所有 JSON 文件？

【问题讨论】：

【解决方案1】：

如果你想遍历它们，你应该在你的 JSONs 目录中创建一个 index.ts 文件，并导入其中的所有文件，并将所有文件导出为包含所有 JSONs 的单个数组，然后将其导入到任何地方做你想做的事。

index.js：

import file1 from './file1.json';
import file2 from './file2.json';

let items = [file1, file2];

export default items;

您应用中的其他任何地方：

import items from 'URLS_DIR';
console.log(items, ` <--- items ----`); // iterate through them

【讨论】：

当我尝试从数据目录导入 jsonFiles 时，它显示 - 找不到模块：无法解析 './data'。 json 文件位于 src 文件夹内的数据目录中。当我尝试将 json 文件保存在公用文件夹中，然后编写上面的代码时，你给这显示了错误 Attempted import error: './' does not contain a default export (imported as 'jsonFiles')
你的 JSON 文件怎么样？
JSON文件都在data文件夹里面，data文件夹在src里面。里面的data文件夹里面的json文件就是2.json、7.json、13232.json、3423.json这样的。
更新答案请查收

【解决方案2】：

您还可以使用“Promise.all”来等待每个文件，如下所示。使用上面答案建议的方法，并执行下面的代码以获得最佳结果！

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

【讨论】：