Non-stop re-rendering when using Next-Auth in NextJS
<p>这是我的“/app/api/auth/[...nextauth]/route.js”</p>
<pre class="brush:php;toolbar:false;">import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google";
export const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };</pre>
<p>和sessionProvider.js</p>
<pre class="brush:php;toolbar:false;">"use client";
import React from "react";
import { SessionProvider } from "next-auth/react";
const Sessionprovider = ({ children }) => {
return <SessionProvider>{children}</SessionProvider>;
};
export default Sessionprovider;</pre>
<p>我用这个将子元素包装在 Layout.js 中</p>
<pre class="brush:php;toolbar:false;"><html lang="en">
<body className={inter.className}>
<Sessionprovider>{children}</Sessionprovider>
</body>
</html></pre>
<p>这是我的 page.js</p>
<pre class="brush:php;toolbar:false;">"use client";
import { getServerSession } from "next-auth";
import { signIn, signOut, useSession } from "next-auth/react";
import { authOptions } from "./api/auth/[...nextauth]/route";
export default async function Home() {
const { data: session, status } = useSession();
console.log(session);
const _signInWithGoogle = async () => {
await signIn("google");
};
return (
<div className="flex justify-center items-center flex-col gap-3 p-5">
<h1 className="font-semibold text-lg">Home Page</h1>
{session ? (
<button
onClick={() => signOut()}
className="p-1 bg-blue-400 text-white font-semibold rounded-md hover:bg-blue-500"
>
Sign Out
</button>
) : (
<button
onClick={_signInWithGoogle}
className="p-1 bg-blue-400 text-white font-semibold rounded-md hover:bg-blue-500"
>
Sign In
</button>
)}
</div>
);
}</pre>
<p>当我运行应用程序时，它会不停地重新渲染。对此的任何帮助将不胜感激。由于控制台显示用户对象，它仍然保留在登录组件中。</p>
