如何正确运用 useSWRImmutable 获取条件化数据？

本文共计1166个文字，预计阅读时间需要5分钟。

在Next.js或React应用中，要安全、可靠地结合`useSWR`进行条件性数据请求，可采取以下步骤：

在使用 useSWRImmutable 进行条件数据获取时（例如仅当路由就绪后才发起请求），一个典型陷阱是：Hook 返回的 data 初始为 undefined，而组件在首次渲染时即尝试遍历或传递该未就绪数据，导致子组件（如 UserRow）根本不会被挂载，console.log 自然不会执行。

你提供的代码中，关键问题在于：

const { data: UserList, error, isLoading, } = useSWRImmutable([router?.isReady ? '/users' : null, params], ([url, filters]) => fetchUserList(url, filters));

当 router.isReady 为 false 时，传入的 key 变为 [null, params]，此时 SWR 认为该 key 无效，不会触发任何请求，UserList 始终为 undefined；即使后续 isReady 变为 true，useSWRImmutable 也不会重新订阅（因其设计初衷是“不可变”——key 改变即视为全新请求，但此处 key 从 null 变为有效字符串，SWR 默认不自动 revalidate）。更严重的是，你的 JSX 映射逻辑直接假设 UserList?.data?.length > 0，但 UserList 本身可能为 undefined 或 { data: undefined }，导致 .data?.length 报错或跳过渲染。

✅ 正确做法不是用 useEffect 中转 useState（这仅掩盖问题，且引入冗余状态和额外重渲染），而是确保 SWR key 的稳定性与语义一致性，并显式处理加载/空数据状态：

✅ 推荐解决方案（专业、简洁、无副作用）

1. 修正 SWR key 逻辑：避免 null key
   useSWRImmutable 要求 key 必须是稳定、可序列化的值。null 作为 key 会导致行为不可预测。应改为使用条件依赖 + suspense: false（默认）+ 显式守卫：

// ✅ 正确：key 始终为数组，仅当条件满足时才启用请求 const shouldFetch = router.isReady; const { data: UserList, error, isLoading } = useSWRImmutable( shouldFetch ? ['/users', params] : null, // key 为 null → SWR 跳过请求 ([url, filters]) => fetchUserList(url, filters), { suspense: false, // 确保非 Suspense 模式（Next.js App Router 中需配合 useSWRConfig） revalidateOnFocus: false, } );

2. 安全的数据消费：始终检查 data 存在性
   UserList 在未请求或请求失败时为 undefined，切勿链式访问 UserList?.data?.length。改用清晰的状态判断：

{isLoading ? ( <tr><td colSpan={6} className="p-8 text-center">Loading...</td></tr> ) : error ? ( <tr><td colSpan={6} className="p-8 text-center text-red-500">Failed to load users.</td></tr> ) : UserList?.data?.length === 0 ? ( <tr className="pointer-events-none"> <td colSpan={6} className="p-8 text-center">No data found.</td> </tr> ) : ( UserList.data.map((data: any) => ( <UserRow key={data.id} data={data} /> )) )}

3. 确保 UserRow 组件能接收并响应数据
   你的 UserRow 本身逻辑正确，但需确认：

   • data 确实是有效对象（可在 UserRow 开头加防御性检查）：

     const UserRow = ({ data }: IUserRow) => { if (!data) return null; // 防御性渲染 console.log('inside row:', data); // 此时必有输出 // ...其余 JSX };

   • key 使用正确：<UserRow key={data.id} /> ✅（注意：key 必须在 map 外层元素上，你原代码中 <>{JSON.stringify(data)}<UserRow /></> 的 Fragment 没有 key，会导致 React Key Warning —— 已修正如下）

4. 调试技巧：打印完整状态流
   在组件顶层添加调试日志，观察生命周期：

console.log({ 'router.isReady': router.isReady, 'shouldFetch': router.isReady, 'UserList': UserList, 'isLoading': isLoading, 'error': error, });

⚠️ 注意事项总结

• useSWRImmutable ≠ useSWR：它不会自动 revalidate，即使 key 相同、参数变化也不会刷新。若需动态过滤，应将 params 作为 key 的一部分（如示例所示），而非在 fetcher 内部处理。
• fetchUserList 中 axios.get(url, filters) 用法错误：第二个参数是 config，不是 query 参数。正确写法应为：

  const { data } = await axios.get(url, { params: filters }); // ✅ query 参数 // 或拼接 URL：axios.get(`${url}?${new URLSearchParams(filters).toString()}`)

• 避免在 map 中返回 <>...</> 片段而不设 key —— React 要求每个列表项的直接子元素必须有唯一 key。直接返回 <UserRow /> 即可。

遵循以上实践，即可彻底解决数据不渲染、console.log 不触发的问题，让 useSWRImmutable 真正发挥其“一次获取、永不变更”的设计价值。