Question

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

我创建了一个POC，其中包含一个select字段的条目的json对象。我可以导入对象，它可以正常工作。但是，我习惯在服务器上使用这样的文件，以便无需重新构建程序即可对其进行编辑。

我将文件转换为.json，并且可以顺利导入。但是，如果我尝试将其移至“ public”文件夹，则无法再导入。如果它仍保留在src文件夹中，它将包含在捆绑软件中，并且我无法直接对其进行编辑。

捆绑文件中是否包含处理可更改数据的标准方法（无论是需要更新还是i18n）？如果没有，我该如何配置该应用程序以使其在部署后从公用文件夹导入？

Answer 1

这应该有效：

将data.json添加到public目录，并在fetch中使用componentDidMount

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'）一样TypeError: expected str, bytes or os.PathLike object, not NoneType，应该发出HTTP请求以检索这些数据

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

1 个答案: