useEffect 内では、ページが更新されると 2 つの条件付き分岐がトリガーされます-PHP中国語ネットワークQ&A

これは React コンポーネントの useEffect コードです。

 import { useSession } from '@supabase/auth-helpers-react' const session = useSession() useEffect(() => { if (セッション) { console.debug('ページに留まる') } それ以外 { console.debug('ログインに移動') router.push('/login').then( () => { console.debug('ログイン完了へ移動') } ) } }, [セッション、ルーター])

認証(セッション)の管理にはsupabaseを使用します。

ページを更新するときに非常に奇妙な問題が発生します (ルーターを介したログインとログアウトのリダイレクトにはまったく問題はありません。この問題はページが更新されたときにのみ表示されます)。両方のブランチに到達します。 js コンソールでは、2 つのブランチからログの条件分岐が確認できます。

「ページに留まる」 および ログインに移動/ログイン完了に移動。

<ブロック引用>

これは、更新後に session が変更されたためだと思います。初めて未定義の場合、2 番目のブランチ router.push がトリガーされます。セッションが見つかると、最初のブランチ stays on the page がすぐにトリガーされます。

これを回避する方法について何か提案はありますか?それとも、React/NextJS でページの更新を処理するための 良い実践方法はありますか?それとも、以前に同様または同じ問題に遭遇した人はいますか?

全員に返信 (2)

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

コードでは、セッションまたはルーターの値が変更されるたびに useEffect が実行されます (useEffect の 2 番目のパラメーター)。したがって、if も else も useEffect の同じ実行では実行されませんが、これらは急速に連続して実行される 2 つの異なる実行で実行されます。

これは、あなたが求めているものを達成するための 1 つの方法です。