如何解决在 SWR 获取请求中使用 Next.js 动态路由查询对象
在使用 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。