如何在 create-react-app React 项目中使用 useEffect() 引用本地数据文件？答案

【问题标题】：How do I refer to a local data file using useEffect() in a create-react-app React project?如何在 create-react-app React 项目中使用 useEffect() 引用本地数据文件？
【发布时间】：2021-06-06 11:49:38
【问题描述】：

我正在开发一个使用 create-react-app 构建的 React 项目，并且对如何使用 useEffect() 引用本地 JSON 文件感到困惑。

我的目录结构如下：

public
src
    components
    data
        test.json
    App.js

在 App.js 中，我使用 useEffect() 和 fetch() 来获取 JSON 文件。

useEffect(() => {
        const getData = () => {
            fetch('./data/test.json'
            , {
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            }
            ).then(function(response) {
                return response.json();
            }
            ).then(function(myJson) {
                // lots of processing happens
            });
        };
        getData();
        setTheContent(toUse);
    },[slug]);

但我在控制台中得到了 http://localhost:3000/data/test.json 的 404。

如果我将我的数据文件夹放在公共目录中（并保持 fetch 路径不变），它可以正常工作，但我的理解是我为此 shouldn’t use the public directory。

另外一点信息：我使用的是useEffect()，而不是仅仅导入 JSON 文件，因为我最终需要根据 URL 参数导入不同的数据文件。

【问题讨论】：

你可以像这样将文件导入到你的 app.js 中：从 './data/test/json' 导入数据，然后在你的 fetch 中你可以引用数据导入

标签： reactjs create-react-app

【解决方案1】：

您可以将文件放在公共文件夹中，该文件夹不包含任何敏感数据，并且是帮助您呈现内容的文件。仅考虑将内容提供给 public 文件夹下的 url 文件，不考虑 public 文件夹外的文件（其他文件仅用于开发目的）。在构建项目时，src 文件夹中的文件将转换为 js 文件块并返回一个目录，该目录包含 public 文件夹中的文件和从 src 文件夹中构建的文件。

【讨论】：

【解决方案2】：

由于 CRA 使用 webpack，src 文件夹中的 URL 被转换（被 webpack“优化”）。

因此，您唯一的选择是在文件的 URL 上使用 require 或 import，或者将文件移动到 public 文件夹（webpack 不会处理该文件夹）。

无论哪种方式，当你从一个有效的 URL 获取它时，你都应该重构它。

// Use require
const data = require("./data/data.json");

// Or import it beforehand
import data from "./data/data.json"

setData(data);

【讨论】：