如何将本地目录中的大型JSON文件列表加载到react app中

Question

我已经获得了100多个JSON文件，我需要在反应应用中本地显示。我可以使用fetch()功能一次加载一个文件，但我不确定如何加载所有文件。

我考虑过获取所有文件的列表，然后在列表中执行fetch()，但问题是我无法访问目录中的文件列表。

我读到我可以使用fs，但似乎在浏览器中无法使用。例如：我尝试过：

  var fs = require('fs');

  var files = fs.readdirSync('../app/components/data/');

但这会引发错误：fs.readdirSync is not a function。我对不同的方法持开放态度。

Answer 1

如果文件很小，一个选项是将它们全部合并到一个文件中的一个大型JSON数组中，并fetch()。如果您不介意加载时间有点受欢迎，您甚至可以从应用程序代码中导入或require() JSON文件，包括其JS包中的内容。

但是，如果文件很大，那么最好创建一个描述其他文件内容和位置的“清单”文件。编写一个脚本来存储index.json中数组中该目录中的所有文件并不太难。从那里，您可以fetch()来自浏览器的索引，然后单独fetch()每个文件。