在 TypeScript React App 中包含列表和其他外部数据的正确方法

Question

我使用 create-react-app npm 包创建了一个 React 应用程序。一切正常，但我不确定如何处理外部文件。

我创建了一个 POC，其中包含 select 字段条目的 json 对象。我可以导入该对象并且它可以正常工作。但是，我习惯于在服务器上提供这样的文件，这样就可以在不重新构建程序的情况下对其进行编辑。

我将文件转换为 .json 并且可以毫无问题地导入它。但是，如果我尝试将它移动到 "public" 文件夹，我将无法再导入它。如果它保留在 src 文件夹中，它将包含在包中，我无法直接编辑它。

将文件包含在包中是否是处理可更改数据（无论是需要更新还是国际化）的标准方式？？？如果没有，我该如何配置应用程序以允许我在部署后从 public 文件夹中导入它？

Answer 1

这应该有效：

将data.json添加到public目录并在componentDidMount

中使用fetch

componentDidMount() {
  fetch('data.json').then(data => {
    data.json().then(response => {
      console.log(response)
      this.setState({ data }); // you can set data to state
     });
  })
}

data.json

的内容

{
  "data": "some data"
}

如果您尝试使用一些外部数据，例如从服务器，你不应该 import 它像任何其他文件（即 import a.js from './a'）你应该发出 HTTP 请求以检索这些数据

在 TypeScript React App 中包含列表和其他外部数据的正确方法

Proper way to include lists and other external data inside a TypeScript React App

json

file

external

reactjs

create-react-app