Next Auth useSession 在初始页面加载时返回未定义答案

【问题标题】：Next Auth useSession returning undefined on initial page loadNext Auth useSession 在初始页面加载时返回未定义
【发布时间】：2022-01-06 00:24:13
【问题描述】：

我有一个问题，即我的 Next Auth useSession 函数在初始页面加载时返回未定义但在页面上点击刷新时有效。代码如下：

<Navigation />

import { useSession, signIn, signOut } from 'next-auth/client'
export default function Navigation() {

  const [session] = useSession()
  return (
    <section className="navigation">
        {!session ? (
            <div onClick={handleSignin} className="loginLink">Login</div>
        ) : ( //Do Logged ins stuff )}
    </section>
  )
}

<Layout>

const Layout = (layoutProps) => (
  <motion.main initial="hidden" animate="enter" exit="exit" variants={variants}>
    <div className="Layout">
      <Head>
        <title>My Site</title>
      </Head>
      <Navigation />
      <div className="Content">{layoutProps.children}</div>
      <Footer />
    </div>
  </motion.main>
)

index.js

class Home extends React.Component {
  render() {
    return (
      <Layout>
         //Home page stuff
      </Layout>
    )
  }
}

export default Home

App.js

渲染（）{ const { 组件 } = this.props

return (
  <>
    <GlobalStyles />
    <AnimatePresence
      exitBeforeEnter
      initial={false}
      onExitComplete={() => window.scrollTo(0, 0)}
    >
      <Component key={Router.router != null ? Router.router.asPath : '/null'} {...this.props} />
    </AnimatePresence>
  </>
)

}

简单的东西。不知道发生了什么。我希望这已经足够了。

【问题讨论】：

标签： javascript next.js next-auth

【解决方案1】：

尝试在App.js 中实现Provider。这是 v3 文档中的一个示例：https://next-auth.js.org/v3/getting-started/example#add-session-state

//pages/_app.js
import { Provider } from "next-auth/client"

export default function App({ Component, pageProps }) {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  )
}

【讨论】：

【解决方案2】：

您应该在_app.js 文件中添加会话提供程序。

【讨论】：

我想通了，希望这次能帮上忙
@Elikill58 我不认为这是一个问题。这似乎是一个措辞不佳的回答尝试。想象一下，如果它被表述为：“您应该在 _app.js 中添加会话提供程序”（正如我编辑的那样）
@Elikill58 我做了...我没有更改内容。只是措辞...