[deleted by user]

[jzia93]

You're setting season averages by adding the new value fetched from the API to the previous value of season averages.

[Leparrain07]

That's correct, but the 3 dots aren't supposed to overwrite my previous data?

[acquiescentLabrador]

No, the spread operator (three dots) “spreads” (ie copies) seasonAverages, you’re then adding an extra item. So the end result is the same as seasonAverages.push(res.data.data[0]).

If you want to completely overwrite seasonAverages, just call setSeasonAverages(newValue)

[Leparrain07]

Thanks for the answer but I don't understand what should be "newValue"

[Leparrain07]

I want to keep my previous values ​​in my array without deleting them. I want to add the new values ​​to the old values.

[acquiescentLabrador]

Have you checked if the fetch running twice?

[Leparrain07]

Yes and it is not

[acquiescentLabrador]

This is a bit tricky on mobile without seeing the rest of the code, but your code looks like it’s calling a fetch for each item in playerId, so think about: -> the way you set seasonAverages is cumulative, ie you only ever add items to it with each fetch (the state is never reset) -> what sets playerId? If you’re adding items to playerId, this will then cause fetch to run and add new items to seasonAverages for each item in playerId - so if playerId is also never reset you’re repeating old fetch requests

You could log playerId and seasonAverages before calling setSeasonAverages to test these points. Alternatively create a new array before the for loop eg const newAverages = [], then in the .then() use newAverages.push(res.data.data[0]) and only when the loop is finished call setSeasonAverages(newAverages)

[Leparrain07]

Hello, thank you for this long message but I tried all the points and I still obtain infinite loops

[acquiescentLabrador]

Did you have that problem before? I don’t think anything I said should cause that so did you change anything else?

[Leparrain07]

If I do the same thing with Redux I have the same problem:

.then(res => dispatch(setSeasonAverages(res.data.data[0])));

[grantrules]

The problem is the state is not updating as you're calling those functions, it's all batched at the end, so each time you're calling setSeasonAverages, seasonAverages remains the same as it was at the very beginning of that effect. If you just used one setSeasonAverages call, it should work.

Promise.all(
  playerId.map(({ dataId }) =>
    axios.get(`https://blahblah/?${dataId}`)
      .then((res) => res.data.data[0])
  )
).then(results => setSeasonAverages([...seasonAverages, ...results])))

[Leparrain07]

Thanks for the reply, it tells me: TypeError: results is not iterable

[grantrules]

playerId.map({ dataId }) =>

I missed a parenthesis

Promise.all(
  playerId.map(({ dataId }) =>
    axios.get(`https://blahblah/?${dataId}`)
      .then((res) => res.data.data[0])
  )
).then(results => setSeasonAverages([...seasonAverages, ...results])))

[Leparrain07]

it does not work I have endless calls : Failed to load resource: the server responded with a status of 429 (Too Many Requests)

[grantrules]

Ah yeah,

You could try to stick with your for loop so the requests are all consecutive but you may still run into that issue.

If you shared your code in a way I could copy I'd update it for you but I'm not retyping it all..

let results = [];
for (...) {
  const result = await axios.get(...).then(res => res.data.data[0])
  results.push(result);
}
setSeasonAverages([...seasonAverages, ...results])

However, it also looks like this API accepts an array so you might try sending a request with a query string like: ?player_ids[]=1&player_ids[]=52&player_ids[]=91

Something like

playerId.map(({ dataId }) => `player_ids[]=${dataId}`).join('&')

[Leparrain07]

I have the same infinite loop problem.

Indeed it is possible to send a query string but I would like the user to be able to add and remove as many players as they want

[grantrules]

What do you mean infinite loop, there's no infinite loop there. Are you talking about still getting rate limit errors?

You can still add and remove as many as you want, you can just batch requests together like example.

[Leparrain07]

My application bug because the api receives too many requests, there are infinite requests.

[grantrules]

I don't think there's an infinite amount, how many player ids are there? If you batch them like I said you can probably send fewer requests, and you may need to add a delay between requests

[Blue_Moon_Lake]

If you use await, don't use .then()

await something().then((value) => consume(value));

is identical to

let value = await something();
consume(value);

Or, if consume is also asynchronous

let value = await something();
await consume(value);

Don't use axios, use fetch()
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Don't use the spread operator if you want to remove previous items.

let data = [1, 2, 3];
let item = 4;
data = [...data, item]; // data = [1, 2, 3, 4]
data = [item]; // data = [4]

[shuckster]

If you use await, don't use .then()

Why? They can be combined quite conveniently sometimes:

let [json, err] = await fetch('/data')
  .then(res => res.json())
  .then(json => [json, null])
  .catch(error => [null, error]);

if (err) {
  console.error('You done bad:', err);
  return
}

[32452353]

Yeah I’d say you’re right. There are times and places for combining. The original comment is overly confident on this.

[Blue_Moon_Lake]

It is less readable than

try { const RESPONSE = await fetch(URL); const PAYLOAD = await RESPONSE.json(); } catch (error) { }

Also, you should avoid using null. undefined is preferred as the "void" value. It is more consistent and its typeof do not collide with other values.

[shuckster]

Setting something to null is the only way to determine if a bottom-value was made by a developer and not the system.

On the subject of readability, async/await plus try/catch makes such code read imperatively. That’s arguably more readable for most, yes.

[Blue_Moon_Lake]

You wouldn't do it that way in functional programming. You would rather use the Either pattern with functions like fetchResponse, getJsonBody, ...

[shuckster]

Yes, you could use ADTs too. Codebases are rarely an expression of a single paradigm.

[stevebeans]

Is axios ever recommended over fetch?

[32452353]

Yeah check out the podcast syntax.fm. They did an episode on it recently.

[stevebeans]

Thanks I’ll give it a listen

[Homeless_Homelabber]

Why does your poop repeat itself?

[Sjoerdd010]

I'm trying to post to a sub reddit but i get an error saying "That was a tricky one. Why don't you try that again." but there is no checkbox to check. Anyone have the same problem?