useEffect 내에서는 페이지가 새로 고쳐질 때 두 개의 조건부 분기가 트리거됩니다.

Question

이것은 React 구성요소의 useEffect 코드입니다.

 '@supabase/auth-helpers-react'에서 { useSession } 가져오기
  const 세션 = useSession()
  useEffect(() => {
    if (세션) {
      console.debug('페이지 유지')
    } 또 다른 {
      console.debug('로그인으로 이동')
      router.push('/login').then(
        () =>
          console.debug('로그인 완료')
        }
      )
    }
  }, [세션, 라우터])

supabase를 사용하여 인증(세션)을 관리합니다.

페이지를 새로 고칠 때 매우 이상한 문제가 있습니다(라우터를 통한 로그인 및 로그아웃 리디렉션에는 전혀 문제가 없으며 페이지를 새로 고칠 때만 나타납니다.). 두 분기 모두 도달하므로 Node.js 콘솔에서 두 개의 분기에서 로그 조건부 분기를 볼 수 있습니다.

"페이지 유지" 및 로그인으로 이동/로그인 완료로 이동.

<인용문>

새로 고침 후 세션이 변경되었기 때문인 것 같습니다. 처음으로 정의되지 않은 경우 두 번째 분기인 router.push가 트리거되고 세션이 발견되면 첫 번째 분기인 페이지 유지가 즉시 트리거됩니다.

이 문제를 해결하는 방법에 대한 제안이 있으신가요? 아니면 React/NextJS에서 페이지 새로 고침을 처리하기 위한 좋은 사례가 있습니까? 아니면 이전에 유사하거나 동일한 문제를 겪은 사람이 있습니까?

Answer 1

코드에서 useEffect는 세션이나 라우터의 값이 변경될 때마다 실행됩니다(useEffect의 두 번째 매개변수). 따라서 if와 else는 동일한 useEffect 실행에서 실행되지 않지만 빠르게 연속해서 실행될 수 있는 두 가지 다른 실행에서 실행됩니다.

이것은 당신이 원하는 것을 달성하는 한 가지 방법입니다.

1. useState를 사용하여 변수 상태 생성 및 관리
2. useEffect에서 상태를 설정(또는 설정하지 않음)하는 로직을 적용하여 세션을 확인하세요
3. 현재 페이지를 렌더링하거나 그 대가로 로그인 페이지를 표시합니다.

구현 예:

으아악

Answer 2

드디어 근본 원인을 찾았습니다.

supabase 인증 도우미는 비동기 함수이며 로드 중인지 오류인지에 대한 상태를 포함하지 않습니다. 이는 시작 부분에 있음을 의미합니다(로드 중임을 의미).

이 문제를 해결하는 간단한 방법은 useSessionContextuseSessionContext。 session 仍将以异步方式获取，但可以通过同步方式获取 isLoading 和 error 状态来解决此问题，并且它们可用于 useEffect를 직접 사용하는 것입니다. session

은 여전히 ​​비동기적으로 가져오지만 이 문제는 isLoading

및 error

상태를 동기적으로 가져오면 해결될 수 있으며 useEffect🎜 내의 조건부 분기에서 사용할 수 있습니다. 🎜 🎜새 코드는 다음과 같습니다: 🎜 으아악