1

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

目标：我只是想摆脱这个问题。你知道什么可能导致这个问题吗？

4

1 回答 1

1

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的顶层，并将调用移至.localStorageuseEffect

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>;
};
于 2021-05-23T15:45:10.450 回答