Question

我可以在我的 React 组件中简单地导入“./city.json”。但我想知道为什么 fetch 会导致 SyntaxError，例如“SyntaxError：Unexpected token < in JSON at position 0”。

我的反应代码，

  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"
      }
   ]
}

Answer 1

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

理论上，您可以拥有一个 requires json 函数，并将其发送到 Response 的正文中，以便 fetch 可以解析响应。但实际上，如果 JSON 是本地文件，您可能应该只 import 或 require JSON。

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

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

1 个答案: