React. js, как использовать функции map и asyn c с обратным вызовом setState? - PullRequest
Новая
       81

React. js, как использовать функции map и asyn c с обратным вызовом setState?

0 голосов
/ 18 июня 2020

В моем приложении React мне нужно последовательно вызывать 2 разные функции для каждой записи в результатах моей карты.

путем вызова функции getOrderLine () и относительно количества записей, я хочу последовательно вызвать функции getItemInfo () и createOrderLine () для каждой записи в результатах карты.

ожидаемое поведение приведенного ниже кода (мы предполагаем, что у нас есть 2 записи):

1-вызов getItemInfo ()
2-вызов createOrderLine ()
3- вызов getItemInfo ()
4-вызов createOrderLine ()

, но у меня было это:

1-вызов getItemInfo ()
2-вызов getItemInfo ()
3- вызов createOrderLine ()
4-вызов createOrderLine ()

я попытался использовать asyn c и обещать, но мне не удалось решить проблему.

ниже приведен источник кода, спасибо Вам за помощь. 

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

1 Ответ

0 голосов
/ 18 июня 2020

Чтобы запустить весь ваш код по порядку и последовательно, вам нужно составить цепочку обещаний: 

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