useEffect 内では、ページが更新されると 2 つの条件付き分岐がトリガーされます
P粉798343415
2023-09-03 14:09:00
<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
コードでは、セッションまたはルーターの値が変更されるたびに useEffect が実行されます (useEffect の 2 番目のパラメーター)。したがって、if も else も useEffect の同じ実行では実行されませんが、これらは急速に連続して実行される 2 つの異なる実行で実行されます。
これは、あなたが求めているものを達成するための 1 つの方法です。
実装例:
リーリーついに根本原因が分かりました。
これは supabase auth helper、これは非同期関数です。ロード中か間違っているかのステータスは含まれていません。つまり、最初にあることを意味します（ロード中であることを意味します）。読み込み中)。
この問題を解決する簡単な方法は、useSessionContext
新しいコードは次のようになります:を直接使用することです。 sessionは引き続き非同期で取得されますが、isLoadingとerrorステータスを同期的に取得してこの問題を解決でき、これらをuseEffect で使用できます。内の条件分岐。リーリー