如何使用for循环进行useFetch？

Question

我正在创建一个使用react的应用程序。我得去取几个数据。这是我的fetch语句：

const [periods] = useFetch('/company/' + slug + '/waterfall?colIndexOffset=6 ');

在行的末尾，它是一个6，但是我遇到了这样的问题。我有句点，每个对象都会更改这些句点。

const [period_waterfall] = useFetch('/company/' + firminfo.code + '/periods');

我把这段时间称为从那里开始，我发现周期的长度如下：

var length = period_waterfall.periods.length

我应该多次调用这个periods fetch (length的次数)。

我试过这个：

for (let i = 0; i < length; i++) {
        my_array.push(useFetch('/company/' + slug + '/waterfall?colIndexOffset=' + i))
      }

但是它会产生错误: React "useFetch“可能被执行不止一次。可能是因为它在循环中被调用。

我该怎么处理呢？

Answer 1

你想在循环中调用一个钩子。这是一种不好的做法，是不允许的。钩子应该总是在最高层被调用。

您还在使用预定义的钩子进行数据检索。这个钩子是用来取一个东西的。按照您的特定顺序，您需要在循环操作中这样做，这意味着您使用的钩子不符合您的需要。

您可以做的是创建一个函数来执行抓取，而不是使用钩子。我喜欢使用axios。

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

在此函数中，您将获取1项。您可以重写它，以便在其中执行循环操作，或者在循环中调用它。

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

注意，循环使用的是await，这意味着它需要在异步函数中。如果你不想那样做，你可以做这样的事情：

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

希望这有助于解决你的问题。