使用SWR多次获取数据以填充数组

Question

我在React中有一个组件需要一个用户数组。我能够使用useUwr一次获取一个单独的用户，例如：

export function Hello(id: number) {
  const { data } = useSWR('/api/user/{id}', fetcher)

  return <div>hello {data.name}!</div>
}

我现在需要一个用户数组，基本上如下所示：

var users = [];  
for(var i = 0; i < 100; i++) {
   const { data } = useSWR('/api/user/{i}', fetcher); 
   users.push(data);
}

这种方法存在问题：Error: Rendered more hooks than during the previous render.

我在思考是否有更智能的方法来获取 100 个用户的数据。谢谢任何建议。

- DLO

---

React hooks 只能在顶层声明，不能在 for 循环内部定义。为了解决您的问题，您可以使用单独的 API 获取用户列表，例如 /api/user/getUsers。 - Amila Senadheera

Answer 1

function multiFetcher(...urls) {
  return Promise.all(urls.map(url => fetcher(url))
}

const { data: [data1, data2, data3] } = useSWR([url1, url2, url3], multiFetcher)

- Callam

---

请阅读 我该如何写一篇好答案？。虽然此代码块可能回答了问答者的问题，但如果您解释一下此代码与问题中的代码有什么不同，您所做的更改，为什么要进行更改以及为什么这样解决问题而不引入其他问题，那么这个答案将更加有用。- 从审阅中 - Saeed Zhiany

Answer 2

试一下这个：

function arrayFetcher(...urlArr) {
  const f = (u) => fetch(u).then((r) => r.json());
  return Promise.all(urlArr.map(f));
}

export function Hello(id: number) {
  let urlArray = [];
  for(let i = 0; i < 100; i++) {
    urlArray.push(`/api/user/${i}`);
  }
  const { data } = useSWR(urlArray, arrayFetcher);

  return (
    <ul>{data && data.map(x => <li key={x.name}>x.name</li>)}</ul>
  )
}

- SoGoddamnUgly

---

从我尝试过的来看，这并不像想象中的那样起作用。虽然 urlArray 作为数组输入，但是 urlArr 输出的是数组的第一个项目。然后第三行失败了，因为 .map 仅适用于数组，而 'urlArr' 不是数组。这是有道理的，因为 useSWR 调用需要一个数组，以实现分页的多个变量的目的。 - Casey Gibson

@KcGibson 你应该在 urlArr 上使用剩余参数，即 function arrayFetcher(...urlArr) { ... }。 - juliomalves

对于 SWR 版本 >= 2.0.0，根据 文档，urlArr 应该是一个数组而不是展开参数。 - Xhua

Answer 3

将urlArray添加到数组中

const { data } = useSWR([urlArray], arrayFetcher);

- mancityballboy

---

请阅读如何撰写一个好的答案？ ，这样您就可以分享arrayFetcher是什么，或者用户如何使用data。您只要提供一行代码并不是一个正确撰写答案的方式。 - Reza Majidi