javascript - 如何在axios响应后在React中使setState同步

Question

我使用 axios 发出 HTTP 请求，并在其中发出另一个 HTTP 请求，以添加有关我获得的项目的一些详细信息。在将其推送到“orders”数组之后，我需要 setState，但它之前已经完成了，所以我无法以正确的方式打印它。它与 SetTimeout 一起使用，但我想以更专业的方式来做。我怎样才能做到同步？

fetchOrders(){
    let orders = [];
    let status;
    this.setState({loading:true});
    http.get('/api/amazon/orders')
        .then(response => {
            if (response.status === 200) status = 200;
            orders = response.data;
            orders.map(order => {
                order.SellerSKU = "";
                http.get(`/api/amazon/orders/items/${order.AmazonOrderId}`)
                    .then(res => {
                        order.SellerSKU = res.data[0].SellerSKU;
                    })
                    .catch(error => {
                        console.log(error);
                    })    
            });
            setTimeout( () => {
                this.setState({orders, error: status ? false : true, loading:false})
            }, 1000);
        })
        .catch(error => {
            this.setState({loading:false, error:true});
            console.error(error);
        });
}

Answer 1

您似乎问了错误的问题，即如何将异步实现为同步，相反，您实际上是在尝试推迟设置状态，直到一切完成。 (又名 XY Problem )

您不需要使 setState 同步 - 您只需要利用一些 promise 链和 Promise.all ，这将允许您推迟 setState 调用，直到一切完成。

简而言之，您应该能够根据您需要的内容进行调整，对响应进行更多转换:

fetchOrders() {
    http.get('/first')
        .then(r => r.data)
        .then(orders => {
            // This wraps the iterable of promises into another promise
            // that doesn't resolve until all the promises in the iterable
            // have finished.
            return Promise.all(orders.map((order) => http.get(`/second/${order.id}`).then(/* transform */))
        })
        .then(transformedOrderPromises => this.setState({ ... }); 
}