如何使用SWR批量请求用户数据填充数组，避免钩子渲染数量异常报错

报错原因 #

报错触发原因是违反React Hook使用规则：Hook 必须在组件最顶层调用，禁止在循环、条件判断、嵌套函数中执行。循环内调用useSWR会导致每次渲染的Hook调用数量/顺序不一致，因此触发该错误。

合理实现方案 #

方案1：调整后端接口（性能最优，推荐）

优先让后端提供批量查询用户的接口，一次性接收100个用户ID参数并返回对应数据，仅需发起一次请求：

// 假设需要查询的用户ID为0~99
const userIds = Array.from({length: 100}, (_, idx) => idx)
const { data: users } = useSWR(`/api/users/list?ids=${userIds.join(',')}`, fetcher)

该方案仅产生1次HTTP请求，没有并发限制问题，也符合接口设计的常规规范。

方案2：前端并行请求（后端无法调整接口时使用）

如果后端只能提供单用户查询接口，可以将所有请求的key组成数组传入useSWR，结合Promise.all并行发起所有请求：

// 生成100个请求的路径数组
const requestKeys = Array.from({length: 100}, (_, idx) => `/api/user/${idx}`)
// 自定义fetcher批量执行所有请求
const { data: users } = useSWR(requestKeys, (keys) => Promise.all(keys.map(key => fetcher(key))))

最终返回的users就是按请求顺序排列的100个用户数据，如果担心100个请求并发过高超出浏览器限制，可以引入并发控制逻辑限制同时发起的请求数量。

内容的提问来源于stack exchange，提问作者DLO