Di dalam useEffect, dua cawangan bersyarat dicetuskan apabila halaman dimuat semula-Soal Jawab Rangkaian PHP Cina

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?

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

membalas semua (2)

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

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.

Gunakan useState untuk mencipta dan mengurus keadaan pembolehubah
Dalam useEffect, semak sesi dengan menggunakan logik untuk menetapkan (atau tidak menetapkan) keadaan
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 ?  : } }

Suka+0

Tambah Balasan

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

Akhirnya, saya jumpa puncanya.

Ia datang daripada cangkuksupabase 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 ialahmenggunakanuseSessionContextuseSessionContext。session仍将以异步方式获取，但可以通过同步方式获取isLoading和error状态来解决此问题，并且它们可用于useEffectsecara terus.session

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

isLoadingdanerror
secara serentak, dan ia boleh digunakan dalam cawangan bersyarat dalamuseEffect. 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])