使用 reactjs 从 rest api 访问数据答案

【问题标题】：Accessing data from rest api with reactjs使用 reactjs 从 rest api 访问数据
【发布时间】：2018-01-09 18:10:24
【问题描述】：

我正在使用 react 开发一个应用程序，但我发现在处理来自 rest api 的信息时遇到了很大的麻烦。

我有一个 fetch，其中 get 方法的 api 应该为我带来客户 ID，但我总是收到这样的错误。

{错误：“找不到客户”} 错误： “找不到客户”

Image of the error

我想获得一个只有所有客户的 id 的数组，为此我创建了这个 fetch 函数，但我不知道在 .then((resposneValue) 中放入什么来获得正确的数组。我试过了map 函数，但随后出现错误，例如未定义 map prototiping。

这是我的代码：

getHistory() {
    const {customer} = this.state
    fetch(
        DOMAIN+'/api/customers/'+customer._id, {
            method: 'get',
            dataType: 'json',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization':'Bearer '+this.props.token
            }
        })
        .then((response) =>
        {
            return response.json();
        })
        .then((responseValue) => {
            /*responseValue.map(function (v) {
                v.platform = v.app ? v.app.platform : null  })*/
            this.setState({customsId:responseValue});
            console.log(responseValue);
        })

}

编辑：

我还有另一个获取：

getCustomers(){

    fetch(

        DOMAIN+'/api/customers/shop/'+this.props.salon, {
            method: 'get',
            dataType: 'json',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization':'Bearer '+this.props.token
            }
        })
        .then((response) =>
        {
            console.log(this.props.salon);
            return response.json();
        })
        .then((responseData) => {
            responseData.map(function (v) {
                v.platform = v.app ? v.app.platform : null  })
            this.setState({customers:responseData});
           //console.log(responseData);

        })
        .catch(function() {
            console.log("error");
        });
}

then 函数中的 console.log 向我报告这个数组：

(22) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{_id: "591d66f69ea5d935ed4b9ba9", shop: {…}, email:...

所以问题是，如何通过第一次或第二次获取访问该 id 值？

【问题讨论】：

看起来您的 api 没有返回您传递的客户 ID 的客户详细信息。
好的，当我运行另一个像这样的提取时：DOMAIN+'/api/customers/shop/'+this.props.salon，我收到了像 {_id: "591d66f69ea5d935ed4b9ba9", shop 这样的客户 ID ：{…}，

标签： javascript api reactjs fetch

【解决方案1】：

这是 API 错误。表示您发送的请求带有无效的customer._id，请检查此参数。

【讨论】：

【解决方案2】：

我是这样解决的：

我创建了这个提取

getCustomers(){

    fetch(

        DOMAIN+'/api/customers/shop/'+this.props.salon, {
            method: 'get',
            dataType: 'json',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization':'Bearer '+this.props.token
            }
        })
        .then((response) =>
        {

            return response.json();
        })
        .then((responseData) => {
            responseData.map(function (v) {
                v.platform = v.app ? v.app.platform : null  })
            this.setState({customers:responseData});
           //console.log(responseData);

        })
        .catch(function() {
            console.log("error");
        });
}

然后我创建了一个 handleClick 来启动函数并使用 row.:_id 我可以打印 id

 handleCellClick(y,x,row){
    //this.getHistory(this.state.orders);
    this.getHistory();
    var ab= this.state.orders
    this.setState({
        open:true,
        slideIndex: 0,
        newForm:false,
        customer:{...row,_id:row._id},
        order:{...x,customer:x.customer}

    });
    this.getCustomers(row._id);

    console.log(row._id);
    console.log(x.customer);

}

【讨论】：