Inside useEffect, two conditional branches are triggered when the page is refreshed-PHP Chinese Network Q&A

This is the useEffect code in the React component.

 import { useSession } from '@supabase/auth-helpers-react' const session = useSession() useEffect(() => { if (session) { console.debug('stay in page') } else { console.debug('goto login') router.push('/login').then( () => { console.debug('goto login done') } ) } }, [session, router])

It uses supabase to manage authentication (session).

There is a very strange problem when refreshing the page (there is no problem at all with login and logout redirection through the router, it only appears when the page is refreshed.), both branches will be reached, so in the js console, we can see Log conditional branch from two branches.

"Stay on page" and Go to login/Go to login complete.

I think this is due to the session changing after the refresh. The first time it is undefined, the second branch router.push is triggered. When the session is found, the first branch stays on the page is triggered immediately.

Any suggestions on how to get around it? Or are there any good practices for handling page refreshes in React/NextJS? Or has anyone encountered similar or the same problem before?

import { useSessionContext } from '@supabase/auth-helpers-react' const {isLoading, session} = useSessionContext() useEffect(() => { if (isLoading) { console.debug('show loading page') } else if (session) { console.debug('stay in page') } else { console.debug('goto login') router.push('/login').then( () => { console.debug('goto login done') } ) } }, [session, isLoading, router])

reply all (2)

P粉2768766632023-09-04 12:40:54 2 floor

In your code, useEffect will be executed whenever the value of the session or router changes (the second parameter of useEffect). Therefore, neither if nor else are executed in the same run of useEffect, although they are executed in two different runs that may be executed in rapid succession.

This is one way to achieve what you are after.

Use useState to create and manage the state of variables
In useEffect, set (or not set) the state by applying logic to check the session
Render the current page or display the login page in the return.

Example implementation:

const App = (props) => { const [isLoggedIn, setIsLoggedIn] = useState(false); useEffect(()=>{ //apply the logic and set the state if(logic) setIsLoggedIn(true); },[]) return {isLoggedIn ?  : } }

Like+0

Add Reply

P粉0356005552023-09-04 00:28:17 1 floor

Finally, I found the root cause.

It comes from thesupabase auth helper, it is an async function, it does not contain the status of whether it is loading or wrong, which means it is at the beginning (which means it is loading).

The simple way to solve this problem is touse directlyuseSessionContext.sessionwill still be fetched asynchronously, but theisLoadinganderrorstatuses can be fetched synchronously to resolve this issue, and they can be used withuseEffect# Conditional branches within ##.

The new code will look like this: