Dans useEffect, deux branches conditionnelles sont déclenchées lorsque la page est actualisée

Question

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 ? 

Answer 1

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.

1. Utilisez useState pour créer et gérer l'état des variables
2. Dans useEffect, vérifiez la session en appliquant une logique pour définir (ou non) l'état
3. 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 ? <ActiveApp /> : <Login />}

}

Answer 2

Enfin, j'ai trouvé la cause profonde.

Il vient du hook supabase 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 directement useSessionContext. La sessionuseSessionContext。 session 仍将以异步方式获取，但可以通过同步方式获取 isLoading 和 error 状态来解决此问题，并且它们可用于 useEffect sera toujours récupérée de manière asynchrone, mais ce problème peut être résolu en récupérant les statuts isLoading

et error

de manière synchrone, et ils peuvent être utilisés dans des branches conditionnelles dans useEffect

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