Can't use Custom array of objects typescript-react

Question

I have a Functional Component that retrieves a list of objects upon rendering. Then, I run a foreach loop with it and it works perfectly! Afterwards, I make http requests with each of these objects to make a new array of objects... But I can't use its foreach, as if I formatted something wrong. I printed both arrays to the console and they look different. Help Please!!

interface minterface
{result: string;
  res: number;
  pos: number;
}
let analyzedAppReviews: minterface[] = [];

    try {
  const { data } = await ailab.post(
    `text/classification/predict/${ailabKey}`,
    {
      text: reviewText,
    }
  );
  let aiLabObj = {} as ailabInterface
  aiLabObj.result = data.result;
  aiLabObj.confidence_score = data.confidence_score;
  aiLabObj.processing_time = data.processing_time;
  analyzedAppReviews.push(aiLabObj);
}

2 array instances array with values

I suspect that you are trying to use analyzedAppReviews before the promises have resolved. You would need to use Promise.all() to resolve them all or you could make analyzedAppReviews be a state and make a setState call to set each element when it is resolved. — Linda Paiste
– Linda Paiste, Commented Apr 15, 2021 at 0:41
I am printing the object that is being received inside the function. I can't create a statevariable for this one because I need to do independent http requests. It'd re-render a lot of times and ends crashing — Javiseeker
– Javiseeker, Commented Apr 15, 2021 at 1:08

Javiseeker · Accepted Answer · 2021-04-15 05:26:53Z

1

As Linda suggested. I changed the foreach loop for a Promise.all since I had to make multiple http requests. Worked like a charm, thank you very much. This is the proper way to do it with axios :) Also, after a bit of searching, it's a big NO to use foreach loops to make http requests. To anybody thinking of using it for that. Promise.all guys!

    let requestsArray = reviews.map((review: { body: string }) => {
  const request = ailab.post(`text/classification/predict/${ailabKey}`, {
    text: review.body,
  });

  return request;
});
Promise.all(requestsArray).then((values) => {
  let tmpList = values.map((value: any) => {
    return value.data;
  });

answered Apr 15, 2021 at 5:26

Javiseeker

471 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't use Custom array of objects typescript-react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related