Di dalam useEffect, dua cawangan bersyarat dicetuskan apabila halaman dimuat semula

Question

Ini ialah useEffect kod dalam komponen React.

 import { useSession } daripada '@supabase/auth-helpers-react'
  const session = useSession()
  useEffect(() => {
    jika (sesi) {
      console.debug('kekal dalam halaman')
    } lain {
      console.debug('log masuk masuk')
      router.push('/login').then(
        () =>
          console.debug('log masuk selesai')
        }
      )
    }
  }, [sesi, penghala])

Ia menggunakan supabase untuk mengurus pengesahan (sesi). 
Terdapat masalah yang sangat pelik semasa menyegarkan halaman (tiada masalah sama sekali dengan log masuk dan log keluar semula melalui penghala, ia hanya muncul apabila halaman dimuat semula.), kedua-dua cawangan akan dicapai, jadi dalam js, kita boleh melihat Log cawangan bersyarat daripada dua cawangan. 
"Kekal di halaman" dan Pergi ke log masuk/Pergi untuk log masuk selesai. 

Saya rasa ini disebabkan sesi berubah selepas muat semula. Kali pertama ia tidak ditentukan, cawangan kedua router.push dicetuskan dengan serta-merta. 

Ada sebarang cadangan tentang cara mengatasinya? Atau adakah terdapat amalan baik untuk mengendalikan penyegaran halaman dalam React/NextJS? Atau ada sesiapa yang menghadapi masalah yang sama atau sama sebelum ini? 
            

Answer 1

Dalam kod anda, useEffect akan dilaksanakan apabila nilai sesi atau penghala berubah (parameter kedua useEffect). Oleh itu, if no else tidak dilaksanakan dalam larian useEffect yang sama, walaupun ia dilaksanakan dalam dua larian berbeza yang mungkin dilaksanakan secara berturut-turut.

Ini adalah salah satu cara untuk mencapai apa yang anda idamkan.

1. Gunakan useState untuk mencipta dan mengurus keadaan pembolehubah
2. Dalam useEffect, semak sesi dengan menggunakan logik untuk menetapkan (atau tidak menetapkan) keadaan
3. Render halaman semasa atau tunjukkan halaman log masuk sebagai balasan.

Contoh pelaksanaan:

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

Akhirnya, saya jumpa puncanya.

Ia datang daripada cangkuk supabase auth helper, ia adalah fungsi async, ia tidak mengandungi status sama ada ia sedang dimuatkan atau ralat, yang bermaksud ia berada pada permulaan (yang bermaksud ia sedang dimuatkan).

Cara mudah untuk menyelesaikan masalah ini ialah menggunakan useSessionContextuseSessionContext。 session 仍将以异步方式获取，但可以通过同步方式获取 isLoading 和 error 状态来解决此问题，并且它们可用于 useEffect secara terus. session

masih akan diambil secara tidak segerak, tetapi masalah ini boleh diselesaikan dengan mengambil status isLoading

dan error

secara serentak, dan ia boleh digunakan dalam cawangan bersyarat dalam useEffect🎜. 🎜 🎜Kod baharu akan kelihatan seperti ini: 🎜

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