如何在 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

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

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

Answer 1

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

Answer 2

由于 CRA 使用 webpack，src 文件夹中的 URLs 被转换（由 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);

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

How do I refer to a local data file using useEffect() in a create-react-app React project?

reactjs

create-react-app