如何使用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

我应该多次调用此periodsfetch （次数length）。

我试过这个：

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

但它给出了错误：React Hook“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)
}

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