Question

服务器错误：TypeError：无法将未定义或空转换为对象

2021-10-26

9999

javascript node.js reactjs next.js next-auth

代码如下

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

我从官方网站粘贴 NextAuth.js 示例代码时出现此错误。我拥有最新版本的 Node.js 和 Next.js。

您可以在此处找到整个源代码 https://github.com/aadipoddar/instagram-react

Answer 1

确保您的 NEXTAUTH_URL=http://localhost:3000 而不是 https://localhost:3000

Ayomide Adelaja

2022-04-11

Answer 2

这是在 providers 实际有任何值之前调用 map 函数的结果。
您可以使用条件渲染来避免此类问题。

试试这个：

{providers && providers.length && Object.values(providers).map((provider) => ( ...

您可以通过将其存储在变量中使其看起来更美观。

像这样：

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>
            ))}
        </>
    )
}

Answer 3

将您的 NEXTAUTH_URL 正确配置为您的客户端 URL，例如

NEXTAUTH_URL=http://localhost:3000

Akash Samal

2021-11-06