Innerhalb von useEffect werden zwei bedingte Verzweigungen ausgelöst, wenn die Seite aktualisiert wird

Question

Dies ist der useEffect-Code in der React-Komponente.

 import { useSession } from '@supabase/auth-helpers-react'
  const session = useSession()
  useEffect(() => {
    if (Sitzung) {
      console.debug('auf der Seite bleiben')
    } anders {
      console.debug('gehe zum Login')
      router.push('/login').then(
        () =>
          console.debug('goto login done')
        }
      )
    }
  }, [Sitzung, Router])

Es verwendet Supabase, um die Authentifizierung (Sitzung) zu verwalten.

Es gibt ein sehr seltsames Problem beim Aktualisieren der Seite (es gibt überhaupt kein Problem mit der Anmelde- und Abmeldeumleitung über den Router, es erscheint nur, wenn die Seite aktualisiert wird.), beide Zweige werden erreicht, also im js-Konsole können wir den bedingten Protokollzweig aus zwei Zweigen sehen.

"Auf der Seite bleiben" und Zur Anmeldung gehen/Zur Anmeldung gehen.

Ich denke, das liegt daran, dass sich die session nach der Aktualisierung geändert hat. Wenn die Sitzung zum ersten Mal nicht definiert ist, wird der zweite Zweig router.push ausgelöst.

Irgendwelche Vorschläge, wie man das Problem umgehen kann? Oder gibt es bewährte Vorgehensweisen für den Umgang mit Seitenaktualisierungen in React/NextJS? Oder ist schon einmal jemand auf ähnliche oder identische Probleme gestoßen?

Answer 1

在您的代码中，只要会话或路由器的值发生更改（useEffect 的第二个参数），就会执行 useEffect。因此，if 和 else 都不会在 useEffect 的同一次运行中执行，尽管是在可能快速连续执行的两次不同运行中执行。

这是实现您所追求的目标的一种方法。

1. 使用 useState 创建和管理变量的状态
2. 在 useEffect 中，通过应用逻辑检查会话来设置（或不设置）状态
3. 在返回中呈现当前页面或显示登录页面。

示例实现：

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

终于，我找到了根本原因。

它来自 supabase auth helper，它是一个异步函数，它不包含是否正在加载或错误的状态，这意味着它在开始（这意味着它正在加载）。

解决这个问题的简单方法是直接使用useSessionContext。 session 仍将以异步方式获取，但可以通过同步方式获取 isLoading 和 error 状态来解决此问题，并且它们可用于 useEffect 内的条件分支。

新代码将如下所示：

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