如何在React中使用javascript处理提取

时间:2017-08-03 09:47:43

标签: javascript json api reactjs fetch

我是新的反应,我正在尝试访问API的数据,我进行了两次获取以获取数组值,并在单击一个表的行时打印console.log的处理程序。当我点击表格时,它会显示客户的ID(此ID是我获取客户获取的ID)但是当我尝试使用getHistory fetch进入另一个值时,它会打印出未定义的内容。

以下是取件:

     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");
            });
    }


 getHistory() {
        fetch(
            DOMAIN+'/api/orders/',{
                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({orders:responseData});
                console.log(responseData);

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

    }

这是处理程序:

 handleCellClick(y,x,row){
            //this.getHistory(this.state.orders);

            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);
            this.getHistory(x.customer);
            console.log(row._id);
            console.log(x.customer);

        }

我得到了row._id,但客户价值返回未定义,

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

您需要在getHistory方法中返回promise,然后使用then子句将调用链接到此方法。

getHistory() {
       return fetch(
            DOMAIN+'/api/orders/',{
                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({orders:responseData});
                console.log(responseData);

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

    }

然后在单元格单击处理函数

中调用它
 handleCellClick(y,x,row){
        //this.getHistory(this.state.orders);

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

        this.getHistory(x.customer).then(response => console.log(response))  
        console.log(row._id);
        console.log(x.customer);

    }