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

发布时间：2021-03-08 15:25

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

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

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

回答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);

回答2

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