useEffect にカウンターと console.log() を用意して、状態のすべての変更を記録しますが、useEffect がマウント上で機能しません。 2回呼ばれました。 React18を使用しています。これが私のプロジェクトの CodeSandbox と以下のコードです: ああああ
にカウンターと
を用意して、状態のすべての変更を記録しますが、
がマウント上で機能しません。 2回呼ばれました。 React18を使用しています。これが私のプロジェクトの CodeSandbox と以下のコードです:
更新: この投稿を見直して、もう少し賢くなって、このようなことはしないでください。
ref を使用するか、カスタム フック を使用せずに作成します。
ref
フック
React 18 以降、development で StrictMode を使用する場合、マウント時に
development
StrictMode
useEffect が 2 回呼び出されるのが通常です。 Document:
useEffect
これは奇妙に思えるかもしれませんが、最終的には、HTTP リクエストをキャッシュし、2 つの呼び出しの間に問題が発生した場合にクリーンアップ関数を使用することで、バグがなく、現在のガイドラインに準拠し、将来のバージョンと互換性のある、より良い React コードを作成できます。以下に例を示します:
この非常に詳細な 記事 では、React チームがこれまでにない方法で useEffect を説明し、例を示しています。
useEffect の useRef ステートメントと if ステートメントでこれらのテクニックを使用して、ステートメントを 1 回だけ起動したり、StrictMode を削除したりすることは避けてください。 ドキュメント : でわかるように、 リーリー リーリー
の
ステートメントと
ステートメントでこれらのテクニックを使用して、ステートメントを 1 回だけ起動したり、
を削除したりすることは避けてください。
useEffect を使用している可能性があります。エフェクトではありません: アプリケーションの初期化 記事 全体を読むことをお勧めします。
を使用している可能性があります。エフェクトではありません: アプリケーションの初期化 記事 全体を読むことをお勧めします。
更新: この投稿を見直して、もう少し賢くなって、このようなことはしないでください。
リーリーref
を使用するか、カスタムフック
を使用せずに作成します。React 18 以降、
development
でStrictMode
を使用する場合、マウント時に
には次のような内容が含まれています。useEffect
が 2 回呼び出されるのが通常です。 Document:これは奇妙に思えるかもしれませんが、最終的には、HTTP リクエストをキャッシュし、2 つの呼び出しの間に問題が発生した場合にクリーンアップ関数を使用することで、バグがなく、現在のガイドラインに準拠し、将来のバージョンと互換性のある、より良い React コードを作成できます。以下に例を示します:
リーリーこの非常に詳細な 記事 では、React チームがこれまでにない方法で
特定の使用例では、そのままにしておくことができます。心配する必要はありません。また、useEffect
を説明し、例を示しています。useEffect
それでも問題が解決しない場合は、の
useRefステートメントと
ifステートメントでこれらのテクニックを使用して、ステートメントを 1 回だけ起動したり、
StrictModeを削除したりすることは避けてください。
ドキュメント : でわかるように、 リーリー リーリーuseEffect
を使用している可能性があります。エフェクトではありません: アプリケーションの初期化 記事 全体を読むことをお勧めします。