score:2

Accepted answer

You're trying to call a hook within a loop. This is a bad practice and is not allowed. Hooks should always be called at the top level.

You're also using a predefined hook for data retrieval. This hook is meant to do one fetch. In your particular order, you need to do this in a loop operation, which means the hook you're using doesn't fit your need.

What you can do, is create a function that does the fetching instead of using the hook. I like to use axios.

const getPeriods = async (offset, slug) => {
  const url = '/company/' + slug + '/waterfall?colIndexOffset=' + offset
  const response = await axios.get(url)
  return response.data
}

In this function, you are fetching 1 item. You may rewrite it so that you do the looping inside of it, or you can call it inside a loop

for (let i = 0; i < length; i++) {
  my_array.push(await getPeriods(i, slug)
}

Note that the loop is using await which means it needs to be inside an async function. If you don't want that, you can always do something like this:

getPeriods(i, slug).then((res) => {
  my_array.push(res.data)
}

Hope this helps solving your issue.


Related Query

More Query from same tag