SWR hook error: "An argument for 'Fetcher' was not provided"

Question

这是我第一次使用 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

目标：我只想摆脱那个问题。您知道可能导致此问题的原因吗？

Answer 1

TL;DR: 您定义全局 fetcher 的 SWRConfig 提供程序需要包装调用 useSWR 的组件。

我假设您在 NavBar 组件中的某处调用 Part3 组件，这可以解释您看到的错误。

您必须将 {isValidRoute && <Navbar />} 移动到 SWRConfig 提供商中。

<AuthContext>
    <SWRConfig
        value={{
            fetcher: (url: string) => axios.get(url).then(res => res.data)
        }}
    >
        {isValidRoute && <Navbar />}
        <Component {...pageProps} />
    </SWRConfig>
</AuthContext>

作为旁注，不要有条件地调用 useSWR（这是一个自定义的 React 挂钩），因为这会破坏 Rules of Hooks.

在您的 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>;
};

SWR hook error: "An argument for 'Fetcher' was not provided"

SWR hook error: "An argument for 'Fetcher' was not provided"

reactjs

next.js

swr