使用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 个用户的数据。感谢您的任何建议。

Answer 1

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

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

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