我想在获取会话后以某种方式获取我的返回值。
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)。但也不起作用。
我不喜欢把它做成一个单页的应用程序,我想用导航的方式。
2条答案
按热度按时间p8ekf7hl1#
该组件渲染
Navigate
组件,而不管任何session
值。React组件渲染是完全同步的,因此返回总是在任何异步逻辑/副作用/等完成之前发生。我猜你想等到效果运行并填充
session
状态后再允许渲染任何一个Navigate
组件。使用加载状态并在获取会话数据时有条件地提前返回。示例:
如果
session
状态值对于未经授权的用户是null
,对于经过身份验证的用户是一个已定义的对象,那么您可以使用单个状态完成相同的操作。示例:
q8l4jmvw2#
解决了!
我刚换了衣服
到
内部返回()