React 无法从服务器解析 JSON 对象

Question

我遇到了这个错误： Uncaught (in promise) SyntaxError: Unexpected token [ in JSON at position 1 当我将包含 JSON 对象数组的 JSON 对象传递给我的组件时。对象结构为： { "arrayName": [{object},{object},{object}, etc...] }

我已经通过验证器运行了 JSON，它运行良好，但我的 api 调用总是返回相同的错误。

export const api = 'http://localhost:8000'

export const headers = {
    'Content-Type': 'application/json',
    'Accept' : 'application/json',

}

export const getAll = () =>
    fetch(`${api}/480.json`, { headers })
        .then(res => res.json())
        .then(data => data.events)

这是在 App.js 中调用它的地方：

componentDidMount() {
        eventsAPI.getAll().then((events) => {
            console.log(events)
            this.setState({ events })
        })
    }

我不确定我为什么会收到错误，我知道我正在发送一个有效的 JSON 对象，我接收它的方式是错误的吗？我可以在开发工具的网络选项卡中看到正在传递和接收正确的格式。我只是不知道我到底哪里错了。这是从服务器记录的响应。我可以在开发工具中看到 XHR 响应，但在这里发布 25 多个对象有点大。

Answer 1

您需要修改 getAll 才能实际返回某些内容。因为它是一个 fetch，你可以直接返回它，这将返回 promise。

export const getAll = () =>
    return fetch(`${api}/480.json`, { headers })
        .then(res => res.json())
        .then(data => data.events)

现在无论您在哪里使用getAll，请务必致电then：

getAll().then(data => console.log(data))