如何將本地目錄中的大量JSON文件加載到React App中

Question

我已經獲得了100多個JSON文件，這些文件需要在react應用程序中本地顯示。 我可以使用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()每個文件。