问题描述
在使用 Next.js 动态路由时,我尝试使用路由查询对象发出 SWR 提取请求,但在设置查询对象之前调用了我的 SWR 提取请求。
给定动态路由 /posts/[id]
,考虑页面 /posts/123
。
import { useRouter } from 'next/router';
import useSWR from 'swr';
export default function MyPage() {
const router = useRouter();
const { id } = router.query;
const url = `https://my.api.com/posts/${id}` // I've also tried using let here
const { data,error } = useSWR(url,fetcher);
console.log(url)
此 URL 最初控制台记录为 https://my.api.com/posts/undefined
,API 返回错误,因为 https://my.api.com/posts/undefined
当然不是有效路径。
紧接着,URL 控制台正确记录为 https://my.api.com/posts/123
并且页面上的数据通常会填充,但有时数据不会填充并且它停留在“加载”状态。当我对 URL 进行硬编码时,这永远不会发生。
我在这里做错了什么吗?为什么查询对象不能立即可用?有没有办法优雅地等待它被设置?
解决方法
您可以尝试像这样使用条件数据获取:
const { data,error } = useSWR(id ? url : null,id ? fetcher : null);
同时检查以下对话:https://github.com/vercel/next.js/discussions/15952