reactjs 使用Supabase在react中获取会话之前执行Return

c9qzyr3d  于 2023-04-05  发布在  React
关注(0)|答案(2)|浏览(117)

我想在获取会话后以某种方式获取我的返回值。
jsx文件

import { useEffect, useState } from 'react'
import './App.css'
import {Navigate} from 'react-router-dom'
import { supabase } from './helpers/supabaseClient'

function App() {
  const [session, setSession] = useState(null)

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session)
    })

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })
    
    console.log(session);
  }, [])
  

  return (
    <div className="">
      {session ? <Navigate to="/home"></Navigate> : <Navigate to="/account"></Navigate>}
      {/* {true ? <Navigate to="/home"></Navigate> : <Navigate to="/account"></Navigate>} */}
    </div>
  )
}

export default App

Navigate函数在我能够使用useEffect检索会话之前路由到另一个react组件。我已经尝试使用await函数,但似乎也不起作用。我使用setTimeout(2000)。但也不起作用。
我不喜欢把它做成一个单页的应用程序,我想用导航的方式。

p8ekf7hl

p8ekf7hl1#

该组件渲染Navigate组件,而不管任何session值。React组件渲染是完全同步的,因此返回总是在任何异步逻辑/副作用/等完成之前发生。
我猜你想等到效果运行并填充session状态后再允许渲染任何一个Navigate组件。使用加载状态并在获取会话数据时有条件地提前返回。
示例:

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [session, setSession] = useState(null);

  useEffect(() => {
    supabase.auth.getSession()
      .then(({ data: { session } }) => {
        setSession(session);
      })
      .finally(() => {
        setIsLoading(false);
      });

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
  }, []);
  
  if (isLoading) {
    return null; // or loading indicator/spinner/etc
  }

  return (
    <div className="">
      <Navigate to={session.access_token ? "/home" : "/account"} replace />
    </div>
  );
}

如果session状态值对于未经授权的用户是null,对于经过身份验证的用户是一个已定义的对象,那么您可以使用单个状态完成相同的操作。
示例:

function App() {
  const [session, setSession] = useState(); // <-- initially undefined

  useEffect(() => {
    supabase.auth.getSession()
      .then(({ data: { session } }) => {
        setSession(session); // <-- set either null/user object
      });

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session); // <-- set either null/user object
    });
  }, []);
  
  if (session === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return (
    <div className="">
      <Navigate to={session.access_token ? "/home" : "/account"} replace />
    </div>
  );
}
q8l4jmvw

q8l4jmvw2#

解决了!
我刚换了衣服

{session ? <Navigate to="/home"></Navigate> : <Navigate to="/account"></Navigate>}

{session==null?<></>:(session.access_token==null ?<Navigate to="/account"></Navigate> :<Navigate to="/home"></Navigate>  )}

内部返回()

相关问题