我有以下代码：
function MyApp({ Component, pageProps }: AppProps) {
const { tronLinkAuth, tronLinkLoading, mutateTronLink } = useTronLink();
const { authenticatedUser, authLoading, authLoggedOut, mutateAuth } = useAuthenticatedUser();
return (
<React.StrictMode>
<CSSReset />
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<ChakraProvider theme={theme}>
<AuthenticationContext.Provider value={{
tronLinkAuth, tronLinkLoading, mutateTronLink,
authenticatedUser, authLoading, authLoggedOut, mutateAuth
}}>
<Component {...pageProps} />
</AuthenticationContext.Provider>
</ChakraProvider>
</React.StrictMode>
)
}
示例useAuthenticatedUser:
export default function useAuthenticatedUser() {
const { data, mutate, error } = useSWR("api_user", fetcher, {
errorRetryCount: 0
});
const loading = !data && !error;
const loggedOut = error && error instanceof UnauthorizedException;
return {
authLoading: loading,
authLoggedOut: loggedOut,
authenticatedUser: data as AuthenticatedUser,
mutateAuth: mutate
};
}
代码是有效的，但当swr传播其结果时，我的整个网页都会重新呈现。
例如：
const Login: NextPage = () => {
console.log('login update');
return (
<>
<Head>
<title>Register / Login</title>
</Head>
<Navbar />
<Box h='100vh'>
<Hero />
</Box>
<Box h='100vh' pt='50px'>
Test second page
</Box>
</>
)
}
export default Login;
在Navbar中使用useContext时，它还会重新渲染整个LoginPage，包括Hero，但这不是我的目的。
const Navbar: React.FC = () => {
const authState = useContext(AuthenticationContext);
...
我也很困惑为什么日志会出现在服务器控制台中，因为这应该在客户端执行
编辑：不是问题，这只是第一次渲染时的问题。
如何解决？
我对在这个用例中使用swr很感兴趣，因为它允许我重新验证身份验证状态，例如聚焦，但同时使用缓存的数据。
编辑：令人困惑以下日志：
function MyApp({ Component, pageProps }: AppProps) {
console.log('app');
const { tronLinkAuth, tronLinkLoading, mutateTronLink } = useTronLink();
const { authenticatedUser, authLoading, authLoggedOut, mutateAuth } = useAuthenticatedUser();
每次我切换选项卡并激活swr时也会打印出来
所以它重新渲染了整个树？似乎不可取。。。
我目前采用了更简单的解决方案，即在使用数据的组件上立即使用useSwr。
来自文档：
每个组件内部都有一个useSWR钩子。既然他们有相同的SWR密钥，并且几乎同时呈现，只有1个网络将提出请求。
您可以重用您的数据挂钩(如上面示例中的useUser(无需担心性能或重复请求。
因此，可以利用它在任何需要的地方重用它，而不必担心全局状态重新渲染
如果存在如何使用全局上下文提供程序的替代响应，请毫不犹豫地分享。