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

Question

我想在获得会话后以某种方式获得我的返回值。

应用程序。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

在我能够使用useEffect检索会话之前，Navigate函数会路由到另一个react组件。我试过使用await函数，但这似乎也不起作用。我使用setTimeout(2000)。但这也没有用。

应该做什么?我不喜欢让它成为单页应用程序。我想使用导航

Answer 1

无论session值是多少，该组件都会呈现Navigate组件。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>
);
}

Answer 2

解决了!

我只是改变了

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

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

内返回()

编辑:你必须使用"==="比较session === null和session === undefined，而不是session。Access_token == null和session == null