React で useEffect が 2 回実行されることに効果的に対処するにはどうすればよいですか?
P粉759457420
P粉759457420 2023-10-20 00:00:23
0
2
786

useEffect にカウンターと console.log() を用意して、状態のすべての変更を記録しますが、useEffect がマウント上で機能しません。 2回呼ばれました。 React18を使用しています。これが私のプロジェクトの CodeSandbox と以下のコードです: ああああ

P粉759457420
P粉759457420

全員に返信(2)
P粉156532706

更新: この投稿を見直して、もう少し賢くなって、このようなことはしないでください。

ref を使用するか、カスタム フック を使用せずに作成します。

リーリー
いいねを押す +0
P粉459440991

React 18 以降、developmentStrictMode を使用する場合、マウント時に

useEffect が 2 回呼び出されるのが通常です。 Document:

には次のような内容が含まれています。

これは奇妙に思えるかもしれませんが、最終的には、HTTP リクエストをキャッシュし、2 つの呼び出しの間に問題が発生した場合にクリーンアップ関数を使用することで、バグがなく、現在のガイドラインに準拠し、将来のバージョンと互換性のある、より良い React コードを作成できます。以下に例を示します:

リーリー

この非常に詳細な 記事 では、React チームがこれまでにない方法で useEffect を説明し、例を示しています。

特定の使用例では、そのままにしておくことができます。心配する必要はありません。また、

useEffectuseRef ステートメントと if ステートメントでこれらのテクニックを使用して、ステートメントを 1 回だけ起動したり、StrictMode を削除したりすることは避けてください。 ドキュメント : でわかるように、 リーリー リーリー

それでも問題が解決しない場合は、

useEffect を使用している可能性があります。エフェクトではありません: アプリケーションの初期化 記事 全体を読むことをお勧めします。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート