如何正确运用 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 报错或跳过渲染。
本文共计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 报错或跳过渲染。