如何在for循环中使用Fetch？

Question

我正在使用React创建一款应用程序。我需要获取多个数据。以下是我的代码:

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

在这一行的结尾，有一个 6, 但我遇到了这样的问题。我有一些周期性变化的对象，而这些对象中包含了一些点。

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

我称之为那段时间，然后像这样计算时间段的长度：

var length = period_waterfall.periods.length

我应该多次调用这个periods获取（length的次数）

我尝试了这样做：

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

但是它会出现错误：React Hook“useFetch”可能会被执行多次。 可能是因为它在循环中被调用。

我该如何处理？

- edche

---

Hook Club 的第一条规则是：不要在循环、条件语句或嵌套函数中调用 Hooks。 - Andy

@Andy 我不想成为一个违规者，但我不知道该怎么办。 - edche

你可以重写 useFetch，或者编写一个 useLoopFetch，在 hook 内部完成这个操作。 - Stephan Bakkelund Valois

@StephanBakkelundValois 我是React的新手，但我会尝试编写。 - edche

useFetch是什么，你在哪里定义它的？ - Bergi

Answer 1

您正在尝试在循环中调用钩子。这是不好的实践方式，不被允许。钩子应始终在顶层调用。

您还使用预定义的钩子进行数据检索。此钩子旨在执行一次提取。在您特定的订单中，您需要在循环操作中执行此操作，这意味着您正在使用的钩子不适合您的需求。

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

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

在这个函数中，你正在获取一个项目。你可以重写它，使得循环在内部进行，或者可以在循环内调用它。

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)
}

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

- Stephan Bakkelund Valois