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

我试图从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>
        );
    }
}

从“React”导入React；
导出默认类UserList扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={customer:[]}；
}
componentDidMount（）{
取（'https://recommenderapi.herokuapp.com/customer_id=x', {
模式：“无cors”，
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”
}
}).then（（{results}）=>this.setState（{customer:results}））；
}
render（）{
console.log（this.state.customer）
const customers=this.state.customer.map（（项目，i）=>(
{item.customer_id}
{item.prediction}
));
返回(
{客户}
);
}
}

这就是API的外观：

当我运行此命令时，console.log（）返回undefined，这意味着我得到错误

TypeError:cannotread属性'map'of undefined

。我不太确定如何解决这个问题，所以任何帮助都将不胜感激！谢谢

编辑： 这是API在您转到链接时返回的内容：

---

{“prediction”：[“Roam in Rome”，“]}

您没有阅读响应主体并解析JSON；相反，您试图在

响应

对象上使用

结果

属性，而该对象没有属性

要读取响应正文，需要使用方法

json（）

，

text（）

，

blob（）

，以及类似的方法。您可能正在发回JSON，因此需要

JSON（）

。您还需要首先检查

ok

标志，因为如果请求因404或500 HTTP错误而失败，

fetch

将实现承诺，但结果可能不是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...
});

---

您没有阅读响应的主体并解析JSON；相反，您试图在

响应

对象上使用

结果

属性，而该对象没有属性

要读取响应正文，需要使用方法

json（）

，

text（）

，

blob（）

，以及类似的方法。您可能正在发回JSON，因此需要

JSON（）

。您还需要首先检查

ok

标志，因为如果请求因404或500 HTTP错误而失败，

fetch

将实现承诺，但结果可能不是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...
});

---

---

我认为它必须使用您指定的

模式：“no cors”

。MDN文档说它阻止

application/json

头被发送。尝试将其更改为

“cors”

我认为必须使用您指定的

模式：“no cors”

。MDN文档说它阻止

application/json

头被发送。尝试将其更改为

“cors”

您需要将客户默认为空数组，直到您从服务器获得响应为止。数据来自服务器后，setState将使用您的数据重新呈现视图。显然，您得到的响应没有

results

属性。我们无法帮助您，因为我们不知道API返回什么。如果它只是返回一个数组，不要对返回的内容进行分解，直接使用它。从根本上说，查看“网络”选项卡以查看您得到了什么，并相应地更新您的履行处理程序。@Nicolamaties-他们是，这一部分是正确的

this.state={customer:[]}我认为你应该这样做
https://recommenderapi.herokuapp.com?customer_id=x
。这不是问题所在，但是
fetch
代码正成为我描述的
fetch
API的牺牲品：您需要查看
ok
标志来检查HTTP成功/失败。然后，可能如前所述，您需要使用
json（）
来读取响应并转换您要发送回的json（如果您要发送回json）。您需要将客户默认为空数组，直到您从服务器获得响应为止，在数据来自服务器后，setState将使用您的数据重新呈现视图。显然，您得到的响应没有
results
属性。我们无法帮助您，因为我们不知道API返回什么。如果它只是返回一个数组，不要对返回的内容进行分解，直接使用它。从根本上说，查看“网络”选项卡以查看您得到了什么，并相应地更新您的履行处理程序。@Nicolamaties-他们是，这一部分是正确的
this.state={customer:[]}我认为你应该这样做
https://recommenderapi.herokuapp.com?customer_id=x
。这不是问题所在，但是
fetch
代码正成为我描述的
fetch
API的牺牲品：您需要查看
ok
标志来检查HTTP成功/失败。然后，可能如前所述，您需要使用
json（）
读取响应并将您要发送回的json（如果您要发送回json）转换为json，而不是从json转换为json。但这可能就是答案，因为OP显然试图在
响应
对象上使用
{result}
，而不是在响应体上。当我这样做时，它只返回一个空数组。你知道为什么会发生这种情况吗？@ajnabz-如果响应是你说的，它甚至不会返回空数组。@T.J.Crowder我跟踪了你关于cors的另一条消息，现在它返回
（2）[“罗马”，“0:“罗马”1:“长度：2_u原型：数组（0）
，谢谢你。@ajnabz-太棒了！我很高兴你把问题解决了！：-）不是从JSON转换成JSON。但这很可能就是答案，因为OP显然试图在
响应
对象上使用
{result}