React.js, how to use map and async functions with setState callback?

Question

In my React app, i need to call 2 different functions successively for each records in my map results.

by calling the function getOrderLine() and regarding the number of records, I want to call successively the functions getItemInfo() and createOrderLine() for each records in the map results.

the expected behavior of the code below is this (we suppose we have 2 records) :

1-calling getItemInfo()
2-calling createOrderLine()
3-calling getItemInfo()
4-calling createOrderLine()

but i had this :

1-calling getItemInfo()
2-calling getItemInfo()
3-calling createOrderLine()
4-calling createOrderLine()

i tried to use async and promise but i failed to resolve the problem.

below is the code source, thank you for your help.

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()})
}

why you need to setState? are you just want to call api In order? — chonnychu, Jun 18 '20 at 04:03
yes, because getItemInfo() needs the new value of quantity and prices provided by getOrderLine function. createOrderLine() needs also the new value of order_code and alloc_qty to call api. — Raef Ghribi, Jun 18 '20 at 07:25

score 0 · Answer 1 · answered Jun 18 '20 at 13:37

To run all your code in order and sequentially you need to compose the promise chain:

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, how to use map and async functions with setState callback?

1 Answers1