useEffect 内では、ページが更新されると 2 つの条件付き分岐がトリガーされます

Question

<p>これは React コンポーネントの <code>useEffect</code> コードです。 </p> <pre class="brush:js;toolbar:false;"> import { useSession } from '@supabase/auth-helpers-react' const session = useSession() useEffect(() => { if (セッション) { console.debug('ページに留まる') } それ以外 { console.debug('ログインに移動') router.push('/login').then( () => { console.debug('ログイン完了へ移動') } ) } }, [セッション、ルーター]) </pre> <p>認証(セッション)の管理にはsupabaseを使用します。 </p> <p>ページを更新するときに非常に奇妙な問題が発生します (ルーターを介したログインとログアウトのリダイレクトにはまったく問題はありません。この問題はページが更新されたときにのみ表示されます)。両方のブランチに到達します。 js コンソールでは、2 つのブランチからログの条件分岐が確認できます。 </p> <p><code>「ページに留まる」</code> および <code>ログインに移動</code>/<code>ログイン完了に移動</code>。 </p> <ブロック引用> <p>これは、更新後に <code>session</code> が変更されたためだと思います。初めて未定義の場合、2 番目のブランチ <code>router.push</code> がトリガーされます。セッションが見つかると、最初のブランチ <code>stays on the page</code> がすぐにトリガーされます。 </p> </blockquote> <p>これを回避する方法について何か提案はありますか?それとも、React/NextJS でページの更新を処理するための 良い実践方法 はありますか?それとも、以前に同様または同じ問題に遭遇した人はいますか? </p>

Answer 1

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

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

1. useState を使用して変数の状態を作成および管理する
2. useEffect では、セッションをチェックするロジックを適用して状態を設定 (または設定しません)
3. 現在のページをレンダリングするか、戻り値でログイン ページを表示します。

実装例:

リーリー

Answer 2

ついに根本原因が分かりました。

これは supabase auth helper、これは非同期関数です。ロード中か間違っているかのステータスは含まれていません。つまり、最初にあることを意味します（ロード中であることを意味します）。読み込み中)。

この問題を解決する簡単な方法は、useSessionContext を直接使用することです。 session は引き続き非同期で取得されますが、isLoading と error ステータスを同期的に取得してこの問題を解決でき、これらを useEffect で使用できます。 内の条件分岐。

新しいコードは次のようになります:

リーリー