I call an API call when a button is clicked. in the console, it shows as the API call was a success. Then upon the successful call, I call a print handler to print the screen. But the first time the button clicks, it shows as unsuccessful & when I click again it shows as successful. Following is my code.

const ConfirmBooking = async() =>{
      console.log("child",seatsSelected)
      const adultTicketCount = seatCount - counter
      console.log("adult",adultTicketCount)
      const firstName = "Ryan"
      const lastName = "Fonseka"
      const email = "[email protected]"
      const mobileNumber = "333333"
      const customerDetails =  {
        firstName:firstName,
        lastName:lastName,
        email:email,
        mobileNumber:mobileNumber
      }
      let seatDetails = []
      let seatCatId = 2761
      seatDetails.push({
        seatCategoryId: seatCatId,
        seatNumbers:seatNumbers, 
        childCount: counter, 
        adultCount: adultTicketCount        
      })
      console.log(seatDetails)
      let mounted = true
      await BookingRequest(seatDetails,customerDetails)  // this is the API call    
      .then(data =>{
        if(mounted){
          setBooking(data)
        }
        
    })
    console.log(booking)
    const status = booking
    console.log(status.success)
    if((booking.success) === true){
     await printHandleOpen(booking)
    } else {
      alert("Booking Failed")
    }
    }

CodePudding user response：

It seems that the problem could be on the line in the API call where you call setBooking(data). This will schedule a state update, but the update will only occur after this function is popped off the call stack, so in the if((booking.success) === true) line, this will only evaluate as expected on the second time through.

CodePudding user response：

// Get this out of the function 'ConfirmBooking'

if((booking.success) === true){
   await printHandleOpen(booking)
} else {
   alert("Booking Failed")
}