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

Question

我正在开发一个使用 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。

如果我将数据文件夹放在公共目录中（并保留获取路径不变），它可以正常工作，但我的理解是我不应该为此使用公共目录。

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

Answer 1

由于 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);

Answer 2

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