无法在提供者中接收数据答案

【问题标题】：not able to receive data in providers无法在提供者中接收数据
【发布时间】：2022-01-07 11:53:13
【问题描述】：

我正在尝试使用 nextjs 和 spotify js 创建登录页面，但遇到以下错误

下面是代码

import React from 'react'
import { getProviders , signIn } from "next-auth/react"

function Login({ providers }) {
    return (
        <div>
           

            {Object.keys(providers).map((provider) => {
                <button>Login With {provider.name}</button>
            })}
        </div>
    )
}

export default Login;


export async function getServerSideProps() {
    const providers = await getProviders()
    
    return {
        props : {
            providers,
        }
    }
}

下面是 [...nextauth].js 中提供程序的代码

export default NextAuth({
    // Configure one or more authentication providers
    providers: [
        SpotifyProvider({
            clientId: process.env.NEXT_PUBLIC_CLIENT_ID,
            clientSecret: process.env.NEXT_PUBLIC_CLIENT_SECRET,
            authorization: LOGIN_URL,
        }),
        // ...add more providers here
    ],
})

【问题讨论】：

getServerSideProps 中的 const providers 值究竟是什么？ console.log(providers) 和 console.log(typeof(providers))所以我可以帮助你。还有getProviders的代码是什么

标签： javascript reactjs next.js next-auth

【解决方案1】：

我猜要么您没有获得任何提供程序，要么您的 providers 对象在初始渲染时是 undefined。您可以改用Object.keys(providers || {}) 来确保它始终是一个对象。

此外，Object.keys 返回对象上的键的字符串数组，这意味着 provider 将是一个字符串，并且不会有 name 属性。如果您要遍历 Object.keys，则需要使用 providers[provider].name 而不是 provider.name

【讨论】：

【解决方案2】：

我是怎么看的：

import React from 'react'
import { getProviders , signIn } from "next-auth/react"

function Login({ providers }) {
    return (
        <div>
           

            {providers.map((provider) => {
                <button>Login With {provider.name}</button>
            })}
        </div>
    )
}

export default Login;


export async function getServerSideProps() {
    const providers = await getProviders()
    //check if you have some data here
    console.log(providers)

    return {
        props : {
            providers: providers,
        }
    }
}

【讨论】：