Dans useEffect, deux branches conditionnelles sont déclenchées lorsque la page est actualisée-Questions et réponses sur le réseau chinois PHP

Il s'agit du code useEffect

 importer { useSession } depuis '@supabase/auth-helpers-react' const session = utiliserSession() useEffect(() => { si (session) { console.debug('rester dans la page') } autre { console.debug('aller à la connexion') router.push('/login').then( () => console.debug('goto login done') } ) } }, [session, routeur]) ≪/pré> Il utilise supabase pour gérer l'authentification (session). 
 Il y a un problème très étrange lors de l'actualisation de la page (il n'y a aucun problème avec la redirection de connexion et de déconnexion via le routeur, il n'apparaît que lorsque la page est actualisée.), les deux branches seront atteintes, donc dans le js, nous pouvons voir la branche conditionnelle du journal à partir de deux branches. 
 "Rester sur la page" et Accéder à la connexion/Accéder à la connexion terminée. 
  Je pense que cela est dû au changement de session La première fois qu'elle est indéfinie, la deuxième branche router.push est déclenchée. Lorsque la session est trouvée, la première branche reste sur la page 
 
 Des suggestions sur la façon de contourner ce problème ? Ou existe-t-il des bonnes pratiques pour gérer les actualisations de pages dans React/NextJS ? Ou est-ce que quelqu'un a déjà rencontré des problèmes similaires ou identiques ?

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])

répondre à tous (2)

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

Dans votre code, useEffect sera exécuté à chaque fois que la valeur de la session ou du routeur change (le deuxième paramètre de useEffect). Par conséquent, ni if ni else ne sont exécutés dans la même exécution de useEffect, bien qu'ils soient exécutés dans deux exécutions différentes qui peuvent être exécutées en succession rapide.

C'est une façon d'atteindre ce que vous recherchez.

Utilisez useState pour créer et gérer l'état des variables
Dans useEffect, vérifiez la session en appliquant une logique pour définir (ou non) l'état
Rendu la page actuelle ou afficher la page de connexion en retour.

Exemple de mise en œuvre :

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

Comme+0

Ajouter une réponse

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

Enfin, j'ai trouvé la cause profonde.

Il vient du hooksupabase auth helper, c'est une fonction asynchrone, elle ne contient pas d'état indiquant si elle est en cours de chargement ou d'erreur, ce qui signifie qu'elle est au début (ce qui signifie qu'elle est en cours de chargement).

Le moyen simple de résoudre ce problème est d'utiliser directementuseSessionContext. LasessionuseSessionContext。session仍将以异步方式获取，但可以通过同步方式获取isLoading和error状态来解决此问题，并且它们可用于useEffectsera toujours récupérée de manière asynchrone, mais ce problème peut être résolu en récupérant les statutsisLoading

errorde manière synchrone, et ils peuvent être utilisés dans des branches conditionnelles dansuseEffect
. Le nouveau code ressemblera à ceci :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])