I am getting error while calling functions inside mapped array in React JS

Viewed 47

Actually I am calling function by mapping over array

let artistId = artist._id;
orderData.products.map((cartproduct, index) => {
const sendOrderData = {
        product: cartproduct._id,
        qty: cartproduct.qty,
      };
  createOrder(userId, sendOrderData).then((data) => {
         if(data.error){
            console.log(data.error)
            }else{
           updateOrderDetails(artistId,sendData).then((response) => {
                if(response.error){
                    console.log(response.error)
                   }else{
                    console.log("done)
                  }
})

But before updateOrderDetails function call is completed for first element the createorder function is called for next element and thus I am not able to update data adequately.

UpdateOrderDetails makes an API call:

export const updateOrderDetailsOfArtist = (artistId, data) => {
  return fetch(`${API}/artist/updateorderdetails/${artistId}`, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  })
    .then((response) => {
      return response.json();
    })
    .catch((err) => console.log(err));
};
1 Answers

So, where ever you have the updateOrderDetails(artistId) function written, add async to it.

async function updateOrderDetails(artistId) {
...
// where ever you're using the return statement type await
return await response
}

But for a better answer you need to show what the updateOrderDetails function does, what does it return, what API calls it is doing.

Related