Next.js SWR依赖请求场景下Fetcher返回数据控制台可见但页面不渲染

问题原因 #

• 第二个useSWR的key生成函数未对依赖的stakedByStaker做非空校验：第一个请求完成前stakedByStaker为undefined，直接访问stakedByStaker[0].staker会抛出类型错误，导致SWR无法正常同步状态，就算后续fetcher返回了正确数据，也不能触发组件重新渲染。
• 没有遵循SWR依赖请求的规则，未在依赖未就绪时返回falsy值告知SWR暂停请求，请求触发时机异常导致状态链路不通。

解决方法 #

修改第二个useSWR的key生成逻辑，先校验stakedByStaker是否就绪，再生成请求key；未就绪时返回null，SWR会自动等待依赖就绪后再发起请求，保证状态可以正常同步。

修改后代码示例：

const { data: stakedByStaker } = useSWR('stakedByStaker', ()=> fetcherStakedByStaker(slice, accounts))
// 先校验依赖是否存在，再生成key，不存在返回null让SWR暂停请求
const { data: listStaked, error } = useSWR(
  () => stakedByStaker?.length ? 'listStaked' + stakedByStaker[0].staker : null, 
  () => fetcherStakedFights(stakedByStaker, accounts, web3)
)

// 可额外增加stakedByStaker的加载判断，避免渲染报错
if (!stakedByStaker) return <div>loading staking data...</div>
if (error) return <div>failed to load</div>
if (!listStaked) return <div>loading...</div>
return (...)

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