开发者问题收集

Next-Auth 与 React.Component

2022-05-17
1012

Next-Auth 具有以下示例,它非常适合函数,但是我有一个类,需要在其中运行 const { data: session } = useSession() 。我想知道如何转换它以使其在类中有效?

export default function AdminDashboard() {
  const { data: session } = useSession()
  // session is always non-null inside this page, all the way down the React tree.
  return "Some super secret dashboard"
}

AdminDashboard.auth = true

我尝试将 session: useSession() 添加到以下构造函数中,但没有成功。

我的类

export default class AdminDashboard extends React.Component {
 constructor(props) {
        super(props);
        this.state = {
          value: null,
          areas:[],
          areasid:[],
          users: [],
          isLoading: true,
          isAreaLoading: true,
          session: useSession() // THIS DID NOT WORK
        };
        this.checkAnswer = this.checkAnswer.bind(this);
        
      }
}
AdminDashboard.auth = true

基于以下答案。我将脚本更改为如下形式

const withSession = (Component) => (props) => {
  const session = useSession()

  // if the component has a render property, we are good
  if (Component.prototype.render) {
    return <Component session={session} {...props} />
  }

  // if the passed component is a function component, there is no need for this wrapper
  throw new Error(
    [
      "You passed a function component, `withSession` is not needed.",
      "You can `useSession` directly in your component.",
    ].join("\n")
  )
}



export default class NewCampaign extends React.Component {
render(){
        const { data: session, status } = this.props.session;
        const { isLoading, users, areas, areasid, isAreaLoading } = this.state;
        return (
            <React.Fragment></React.Fragment>
         )}
}

const ClassComponentWithSession = withSession(NewCampaign)

NewCampaign.auth = false;

NewCampaign.getLayout = function getLayout(page) {
  return (
    <Dashboard>
      {page}
    </Dashboard>
  )
}

但是,我收到无法解构“this.props.session”属性“数据”的提示,因为它未定义。

2个回答

您应该使用 getSession 等待 结果。

async function myFunction() {
  const session = await getSession()
  // session available here
}

您可以在客户端和服务器上使用它。

Ivan V.
2022-05-17

如果您想在类组件中使用 useSession() 钩子,您可以借助高阶组件或渲染道具来实现。

高阶组件

import { useSession } from "next-auth/react"

const withSession = (Component) => (props) => {
  const session = useSession()

  // if the component has a render property, we are good
  if (Component.prototype.render) {
    return <Component session={session} {...props} />
  }

  // if the passed component is a function component, there is no need for this wrapper
  throw new Error(
    [
      "You passed a function component, `withSession` is not needed.",
      "You can `useSession` directly in your component.",
    ].join("\n")
  )
}

// Usage
class ClassComponent extends React.Component {
  render() {
    const { data: session, status } = this.props.session
    return null
  }
}

const ClassComponentWithSession = withSession(ClassComponent)

渲染道具

import { useSession } from "next-auth/react"

const UseSession = ({ children }) => {
  const session = useSession()
  return children(session)
}

// Usage
class ClassComponent extends React.Component {
  render() {
    return (
      <UseSession>
        {(session) => <pre>{JSON.stringify(session, null, 2)}</pre>}
      </UseSession>
    )
  }
}
A G
2022-05-17