[英]Server Error : TypeError: Cannot convert undefined or null to object
Here is the Code这是代码
import { getProviders, signIn as SignIntoProvider } from "next-auth/react"
function signIn({ providers }) {
return (
<>
{Object.values(providers).map((provider) => (
<div key={provider.name}>
<button onClick={() => SignIntoProvider(provider.id)}>
Sign in with {provider.name}
</button>
</div>
))}
</>
)
}
export async function getServerSideProps() {
const providers = await getProviders();
return {
props: {
providers
}
}
}
export default signIn
I am getting this error on pasting NextAuth.js sample code from the official website.从官方网站粘贴 NextAuth.js 示例代码时出现此错误。 I have the latest build of Node.js and Next.js.
我有最新版本的 Node.js 和 Next.js。
You can find the whole source code here https://github.com/aadipoddar/instagram-react你可以在这里找到整个源代码https://github.com/aadipoddar/instagram-react
That's the result of the map
function being called before providers
actually has any value.这是在
providers
实际具有任何值之前调用map
函数的结果。
You can use conditional rendering to avoid such problems.您可以使用条件渲染来避免此类问题。
Try this:尝试这个:
{providers && providers.length && Object.values(providers).map((provider) => ( ...
You can make it look nicer by storing it in a variable.您可以通过将其存储在变量中使其看起来更好。
Like so:像这样:
function signIn({ providers }) {
const checkProviders = (
providers &&
providers.length
);
return (
<>
{checkProviders && Object.values(providers).map((provider) => (
<div key={provider.name}>
<button onClick={() => SignIntoProvider(provider.id)}>
Sign in with {provider.name}
</button>
</div>
))}
</>
)
}
Configure your NEXTAUTH_URL properly to your client url ie将您的 NEXTAUTH_URL 正确配置为您的客户端 url,即
NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_URL=http://localhost:3000
Ensure your NEXTAUTH_URL=http://localhost:3000 not https://localhost:3000确保您的 NEXTAUTH_URL=http://localhost:3000 不是 https://localhost:3000
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.