Question

在我的React应用程序中，我需要为地图结果中的每个记录依次调用2个不同的函数。

通过调用函数getOrderLine（）并考虑记录数，我想为地图结果中的每个记录依次调用函数getItemInfo（）和createOrderLine（）。

下面的代码的预期行为是这样的（我们假设我们有2条记录）：

1调用getItemInfo（）
2调用createOrderLine（）
3调用getItemInfo（）
4调用createOrderLine（）

但是我有这个：

1调用getItemInfo（）
2调用getItemInfo（）
3调用createOrderLine（）
4调用createOrderLine（）

我尝试使用async并答应了，但未能解决问题。

下面是代码源，谢谢您的帮助。

getOrderLine = () => {

    axios
      .post(
        this.hostname +`getPoLine.p?id=` +  this.id 
      )
      .then(response => {

        response.data.ProDataSet.tt_order_line.map( item=>{
            this.setState({
                quantity: item.quantity,
                price: item.price
            },()=>{this.getItemInfo()})
        })        
    })
  }

getItemInfo = () => {   

    /* some code */
            this.setState({

                order_code: "value 1",
                alloc_qty: 20,
            },()=>{this.createOrderLine()})
}

Answer 1

要按顺序运行所有代码，您需要组成承诺链：

var getOrderLine = () => {
  axios
    .post(this.hostname + 'getPoLine.p?id=' + this.id)
    .then(response => {
      let i = 0
      next()

      function next (err) {
        if (err) {
          // an error occurred
          return
        }

        if (i >= response.data.ProDataSet.tt_order_line.length) {
          // processed all the lines
          return
        }

        const item = response.data.ProDataSet.tt_order_line[i]
        i++

        this.setState({
          quantity: item.quantity,
          price: item.price
        }, () => {
          this.getItemInfo()
            .then(() => {
              return this.createOrderLine() // assume it returns a promise
            })
            .then(next)
            .catch(next)
        })
      }
    })
}

var getItemInfo = () => {
  return new Promise(resolve => {
    this.setState({
      order_code: 'value 1',
      alloc_qty: 20
    }, resolve)
  })
}

React.js，如何在setState回调中使用map和async函数？

1 个答案: