fetch 给出响应 Unexpected token < in JSON

Question

如何获取本地json。错误说Unexpected token < ..。我没有网络错误。

项目列表.js：

import React, { Component } from 'react';


class Itemslist extends Component {
  componentDidMount() {
    fetch('items.json').then(res => {
      console.log(res)
      // return res.json()
    }).then(res => {
      console.log(res)
    })
  }
}

以下是我在开发工具中得到的回应

Response {type: "basic", url: 
"http://localhost:5000/items.json", redirected: false, status: 200, ok: true, …}
body: ReadableStream
bodyUsed: true
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost:5000/items.json"
__proto__: Response

虽然响应是 200，但我收到以下错误：

 bundle.js:30 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

项目结构：

|---static
|   |---reactApp
|       |--components
|       |  |--items.json
|       |  |--Itemslist.js
|       |
|       |--App.js

Answer 1

Unexpected token < ..意味着 JSON 解析失败，因为您在期望 JSON 时以某种方式获得了 HTML。请检查响应http://localhost:5000/items.json是否真的有效 JSON。

一种简单的检查方法是将代码更改为res.text()并将结果记录到控制台。