javascript - 如何将大量 JSON 文件从本地目录加载到 React 应用程序中

Question

我收到了 100 多个 JSON 文件，我需要在 React 应用程序中本地显示这些文件。我可以使用 fetch() 函数一次加载一个文件，但我不确定如何加载所有文件。

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

我读到我可以使用 fs 但它似乎在浏览器中不起作用。例如:我已经尝试过:

  var fs = require('fs');

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

但这会引发错误:fs.readdirSync 不是函数。我对不同的方法持开放态度。

Answer 1

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

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