Correctly push element to array state with async function

Question

I found a solution to push elements to an array state (Push method in React Hooks (useState)?)
But as you see below, setTheArray is inside a callback. So the order of theArray depend of the callback time.
How to preserve order of theArray based on service_months's order ?

useEffect(() => {
  for (const service_month of service_months) {
    GET(`/api/report/${props.user_id}`, service_month, resp => {
      setTheArray(oldArray => [...oldArray, resp.data])
    })
  }
}, [service_months])

You might be able to immediately insert a placeholder element and then replace it with the real value once it arrives, though there may be better approaches. — DBS
– DBS, Commented Sep 21, 2021 at 12:59

Unviray · Accepted Answer · 2021-09-21 14:13:44Z

2

One way to do this would be to convert the callback to a Promise and also minimise state changes on every report using something like this:

const GETAsync = (URL, val) => {
  return new Promise((resolve) => {
    GET(URL, val, (resp) => {
      resolve(resp.data)
    })
  })
}

useEffect(() => {
async function updateState() {
  const data = await Promise.all(
    service_months.map((service_month) =>
      GETAsync(`/api/report/${props.user_id}`, service_month)
    )
  )

  setTheArray((oldArray) => [...oldArray, ...data])
}

updateState()
}, [service_months])

edited Sep 21, 2021 at 14:13

Unviray

1712 silver badges13 bronze badges

answered Sep 21, 2021 at 13:04

Ryan

6,4171 gold badge31 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

Correctly push element to array state with async function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related