在React中返回未定义的Fetch方法

Question

我试图从React调用一个API，但它一直以未定义的方式返回。这是我的代码：

import React from 'react';

export default class UserList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { customer: [] };
    }

    componentDidMount() {
        fetch('https://recommenderapi.herokuapp.com/customer_id=x', {
            mode: 'no-cors',
            method: "post",
            headers: {
                "Content-Type": "application/json"
            }
        }).then(({ results }) => this.setState({ customer: results }));
    }

    render() {
        console.log(this.state.customer)
        const customers = this.state.customer.map((item, i) => (
            <div>
                <h1>{item.customer_id}</h1>
                <h1>{item.prediction}</h1>
            </div>
        ));

        return (
            <div id="layout-content" className="layout-content-wrapper">
                <div className="panel-list">{customers}</div>
            </div>
        );
    }
}

当我运行它时，console.log（）返回未定义的，这意味着我得到的错误TypeError： Cannot read属性'map'的未定义的。我不太确定如何解决这个问题，所以任何帮助都将不胜感激！谢谢。

编辑：这是API在您转到以下链接时返回的内容：{“prediction”：[“Roam in Rome”，“”]}

Answer 1

我认为它必须与您指定的模式：no-cors有关。MDN留档说它阻止发送应用程序/json标头。尝试将其更改为"cors"

Answer 2

您没有读取响应的主体并解析JSON；相反，您试图在响应对象上使用一个结果属性，该属性没有。

要读取响应正文，需要使用方法json（），text（），blob（），以及类似的方法。您可能正在发回JSON，因此需要JSON（）。您还需要首先检查ok标志，因为如果请求因404或500 HTTP错误而失败，fetch将实现promise，但结果可能不是JSON。最后，您应该处理/报告fetch中的错误：

fetch('https://recommenderapi.herokuapp.com/customer_id=x', {
    mode: 'no-cors',
    method: "post",
    headers: {
        "Content-Type": "application/json"
    }
})
.then(response => {
    // *** Check for HTTP success
    if (!response.ok) {
        throw new Error(`HTTP error ${response.status}`);
    }
    // *** Read the body, parse it as JSON
    return response.json();
})
.then(({ results }) => this.setState({ customer: results }))
.catch(error => {
    // ...*** handle/report error...
});