时间戳

首页 > 解决方案 > 使用 SWR 多次获取以填充数组

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

问题描述

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

标签： reactjsswr

解决方案

尝试这个：

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

推荐阅读