ForEach API calls react state not updating correctly

Question

I've got an API to work with where I first need to get a list of ids before calling APIs to get more details of each item.

I'm having trouble storing the result of the details in state. Somethings wrong with my understanding of the useState lifecycle functionality.

Here's my code:

const MyComponent = () => {
  const [details, setDetails] = useState({})

  useEffect(() => {
    api.getIds().then(res =>
      res.data.ids.forEach(id =>
        api.getDetails(id).then((res) => {
          const newDetails = { ...details }
          newDetails[id] = res.data.details
          setDetails(newDetails)
        })
      )
    )
  }, [])

  console.log(details)
  ...
}

In my results got api.getIds{} I have 2 ids. What I'd expect in the console at the end of the render cycles is the following:

{ 1: <details for 1>, 2: <details for 2> }

Instead I get just:

{ 1: <details for 1> }
{ 2: <details for 2> }

Instead of updating the state object, it's being replaced. There's lifecycle stuff going on that prevents me from having the most up to date state in creating newDetails.

How can I handle this properly?

Restrictions: I can't modify the API.

Ciao, the second `useEffect` could be a problem... In this case, you are launching 2 request in async and in `.then()` you are setting `details` using an hook that is async... — Giovanni Esposito, Aug 09 '20 at 13:11
Ok so I should rather just combine them in the first one? Edit: that didn't help.. So the second useEffect isn't an issue (but also not necessary). I'll update my answer for some focus. — Barry Michael Doyle, Aug 09 '20 at 13:13
I'm thinking a solution like: in second `useEffect` instead of `ids.forEach`, just one call that returns all the details for all the ids you retrieve in first `useEffect`. But can you modify API? — Giovanni Esposito, Aug 09 '20 at 13:15
Understood. And if you use `useRef` for `details` insted of `useState`? Could work. The only thing is I don't know if you are using `details` in render. — Giovanni Esposito, Aug 09 '20 at 13:19

ForEach API calls react state not updating correctly

0 Answers0