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对象，这是我收到错误的方式吗？我可以在开发工具的网络选项卡中看到正在传递和接收的格式正确。我只是不知道我到底出了什么问题。这是从服务器记录的响应。我可以在dev-tools中看到XHR响应，但是在这里发布25个以上的对象有点大。

Answer 1

您需要修改getAll才能实际返回某些内容。因为它是一个获取，你可以返回它，这将返回承诺。

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))