在react中从本地获取json数据

Question

我可以直接导入"/city.json"在我的反应分量中。但是我想知道为什么fetch会导致SyntaxError，比如&;SyntaxError: Unexpected token <</p>

my react code，

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

。/城市。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。

如果文件通过web服务器可用(例如，如果您正在运行localhost:8080)检查是否可以通过浏览http://localhost:8080/city.json检索json。如果这返回一个200响应，响应体中有JSON，那么您的fetch看起来不错。