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)

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) => {

Hope this helps solving your issue.

Related Query

More Query from same tag