在反应中从本地获取json数据答案

【问题标题】：Fetching json data from local in react在反应中从本地获取json数据
【发布时间】：2021-03-08 09:14:27
【问题描述】：

我可以在我的反应组件中简单地导入“./city.json”。但我想知道为什么 fetch 会导致 SyntaxError，例如“SyntaxError: Unexpected token

我的反应代码，

  componentDidMount(){
    fetch("./city.json")
      .then( response => response.json())
      .then( data => console.log(data))
      .catch(err=> console.log(err))
  }

./city.json 文件，

{
   "city":[
      {
         "id":"5368361",
         "name":"Los Angeles",
         "country":"US",
         "admin1":"California",
         "lat":"34.0522300",
         "lon":"-118.2436800",
         "pop":"3971883"
      }
   ]
}

【问题讨论】：

daveceddia.com/unexpected-token-in-json-at-position-0 可以帮忙吗？
检查浏览器开发工具以查看服务器的响应包含什么（或者只需在浏览器地址中输入完整的 URL 并转到它，因为它只是一个 GET 请求）。如果不是 JSON（而是 HTML 中的一些默认错误消息），请检查您的服务器配置和请求处理程序以了解请求可能失败的原因。例如，您可能需要公开任何文件/资产/目录以使这些文件可公开访问。
您还需要告诉客户端您正在尝试访问并接受来自服务器的 json 资源。 ``` fetch('./city.json' ,{ headers : { 'Content-Type': 'application/json', 'Accept': 'application/json' } } ) ``

标签： reactjs fetch

【解决方案1】：

Fetch 最常用于通过网络获取资源。 API 依赖于接收Response 对象。您不能简单地获取原始文件。语法不会是 Fetch 所期望的。

理论上，你可以有一个 requires 和 json 的函数，并在 Response 的主体中发送它，所以 fetch 可以解析响应。但实际上，如果 JSON 是本地文件，您可能应该只使用 import 或 require JSON。

如果文件可通过 Web 服务器获得（例如，如果您正在运行 localhost:8080），请检查您是否可以通过浏览 http://localhost:8080/city.json 来检索 json。如果这在响应正文中返回带有 JSON 的 200 响应，那么您拥有的 fetch 看起来不错。

【讨论】：