reactjs - SWR 挂钩错误:“未提供 'Fetcher' 的参数”
问题描述
这是我第一次使用 SWR hook,实际上一切都很好。但是我有一个错误,我真的不知道那里发生了什么,所以让我先给你看我的代码。
这是全局配置
<AuthContext>
{isValidRoute && <Navbar />}
<SWRConfig
value={{
fetcher: (url: string) => axios.get(url).then(res => res.data)
}}
>
<Component {...pageProps} />
</SWRConfig>
</AuthContext>
这就是我使用它的地方
import useSWR from "swr";
import { NavbarPart3 } from "../NavbarStyled";
import { dataObject } from "../../../GlobalInterfaces/AuthContextInterfaces";
const Part3 = () => {
if (typeof window !== "undefined") {
const userId: dataObject = JSON.parse(localStorage.getItem("Auth"));
const { data } = useSWR(
"http://localhost:5000/api/user/singleU/" + userId.user.id
);
console.log(data);
}
return <NavbarPart3></NavbarPart3>;
};
export default Part3;
现在,这是错误
Expected 4 arguments, but got 1.ts(2554)
use-swr.d.ts(4, 91): An argument for 'Fetcher' was not provided
目标:我只是想摆脱这个问题。你知道什么可能导致这个问题吗?
解决方案
TL;DR:SWRConfig
您定义全局的提供者fetcher
需要包装useSWR
被调用的组件。
我假设您在Part3
组件内的某处调用该组件NavBar
,这将解释您所看到的错误。
您必须{isValidRoute && <Navbar />}
在提供程序内部移动SWRConfig
。
<AuthContext>
<SWRConfig
value={{
fetcher: (url: string) => axios.get(url).then(res => res.data)
}}
>
{isValidRoute && <Navbar />}
<Component {...pageProps} />
</SWRConfig>
</AuthContext>
作为旁注,不要有条件地调用useSWR
(这是一个自定义的 React 钩子),因为这会破坏钩子的规则。
在您的Part3
组件中,将调用移至组件useSWR
的顶层,并将调用移至.localStorage
useEffect
const Part3 = () => {
const [userId, setUserId] = useState()
const { data } = useSWR(
// Using the arrow function syntax so that the request is only made when `userId.user.id` is valid
() => "http://localhost:5000/api/user/singleU/" + userId.user.id
);
useEffect(() => {
const auth = JSON.parse(localStorage.getItem("Auth"));
setUserId(auth);
}, []);
console.log(data);
return <NavbarPart3></NavbarPart3>;
};
推荐阅读
- microsoft-graph-api - 如何使用 Microsoft Graph 访问其他用户的日历约会
- django - FieldError:CharField 的不支持查找“unaccent”或不允许加入该字段
- memory - 服务器内存使用报告不正确?
- html - 如何在 html 视频标签中播放 s3 视频网址?
- javascript - 使用 blob URL 和程序化点击事件的自动下载是如何工作的?
- dart - 设置文本以匹配颤动中的列宽
- java - JAXB 解组子属性而不创建子类
- java - 如何用java以位的形式声明一个值为-128的字节?
- java - 深度优先搜索给出错误的输出
- laravel - 记录详细信息页面电话卡原始特定