如何访问使用 create react app 创建的 src 文件夹中的 json 文件

Posted 2023-03-28

【中文标题】如何访问使用 create react app 创建的 src 文件夹中的 json 文件

【英文标题】：How to access json file in src folder created using create react app

【发布时间】：2019-04-30 08:46:36

【问题描述】：

我是一个反应新手。我已经使用 npx create-react-app 创建了反应应用程序。在操作中，axios.get 抛出 localhost:3000 file not found 错误。以下是 src/actions/index.js 中的代码

       export function lang(language) 
      let url = "./../resources/strings/strings_" + language + ".json";
      return dispatch => 
        axios.get(url).then(response => 
          console.log(response.data)
        ).catch(response => 
          console.log(response);
        );
      
    

这是项目结构[1]：https://i.stack.imgur.com/CwTJg.png

我做错了什么？我找不到合适的解决方案。 提前致谢。

【问题讨论】：

Unable to fetch data from local json file by axios的可能重复

有没有办法通过将 json 文件保存在 src 文件夹中来实现这一点？

【参考方案1】：

我同意 Easwar，您需要查看该问题的答案。

看来 axios 仅在 /public 文件夹中运行，因此您需要将 json 文件放在 public 文件夹中。如果需要，您可以将它们放在公用文件夹中的文件夹中。

这是有道理的，因为 webpack 包位于 public 文件夹中，并且一旦应用程序被捆绑，只有 public 文件夹中的文件可用于您的 react 项目。

由于 axios 是一个 xhr 请求库，在你使用它的那一刻，它可能看到的唯一文件结构很可能是在 public 文件夹中：index.html、manifest.json 和你的 webpack bundle.js，其中包含所有您的 js 代码捆绑到 1 个文件中。

【讨论】：

有没有办法通过将 json 文件保存在 src 文件夹中来实现这一点？ @ekr990011

仅当您使用导入或不需要 axios 时。如果你使用了 create-react-app，那么你在 react 并且很可能是 es6，所以导入“[file-path-here]”。 Axios 不能，因为它发生在您使用它的事件中。您是否有理由要使用 axios 来获取这些 json 文件？这个问题的答案谈到了导入json文件：***.com/questions/39686035/import-json-file-in-react

axios 真的是用来从服务器获取数据的。如果您不希望最终用户在请求之前下载这些 json 文件，那么您确实需要一个与 react 前端分开的 Web 服务器来存放该 json 数据，那么您可以使用 axios 从服务器请求该数据。

我需要根据所选语言动态导入 json 文件。我该怎么做？从 './../resources/strings/strings_" + 语言 + ".json' 导入语言路径。这里的语言应该替换为localStorage值

例如，您的语言变量可能来自您所在的州。我假设最终用户可以选择他们的语言，这意味着您很可能将其保存在某个地方，或者作为传递给该组件的道具，该组件将提供语言 json。