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

Question

我使用 axios 发出 HTTP 请求，并在其中发出另一个 HTTP 请求，以添加有关我获得的项目的一些详细信息。将它推送到“订单”数组后，我需要设置状态，但它之前已经完成了，所以我无法以正确的方式打印它。 它适用于 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({ ... }); 
}

Answer 2

setState 可以带一个回调函数，改变状态后会执行回调。所以您可以setState 并在回调中添加您的第二个 API 调用。

类似这样的：

http.get('/api/amazon/orders')
    .then(response => {
        if (response.status === 200) status = 200;
        orders = response.data;
        this.setState({orders, error: status ? false : true, loading:false}, 
          () => {
            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);
                  })    
        });
    })

请注意，我只是编辑了一个肮脏的方式，可能需要您进行一些调整才能使其正常工作。

Answer 3

在我的项目中，我伪造了一个同步的setState 以避免很多陷阱，使代码更清晰。这是我的工作：

class MyComponent extends React.Component {
   // override react's setState
   setState(partialState) {
      const mergedState = { ...this.state, ...partialState };
      this.state = mergedState;
      super.setState(partialState);
   }
}

说明：在调用真正的setState之前，状态也被设置为this.state，这样在实际更新之前对它的任何引用都是正确的。

唯一的缺点是您必须从MyComponent 扩展而不是React.Component。