如何在 React 中使用 javascript 处理 fetch答案

【问题标题】：How to handle fetch with javascript in React如何在 React 中使用 javascript 处理 fetch
【发布时间】：2017-08-03 09:47:43
【问题描述】：

我是 react 新手，我正在尝试访问 API 的数据，当您单击一个表的一行时，我进行了两次获取以获取数组值和一个处理程序以打印 console.log。当我在表格中单击时，它会向我显示客户的 id（此 id 是我通过 get customer fetch 获得的 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 但客户值返回给我未定义，

感谢您的帮助！

【问题讨论】：

如何调用handleCellClick 方法？
在带有 onCellClick={this.handleCellClick.bind(this)} 的数据表中
responseData 对象是什么样的？你能把这个对象放在你的问题中吗？

标签： javascript json api reactjs fetch

【解决方案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);

    }

【讨论】：