React フックがイベント リスナーと一貫性のない状態の動作を示すのはなぜですか?

イベント リスナーでの React フックの誤った動作

概要

この記事では、React フックの使用時に発生する問題、特にイベント リスナーの一貫性のない動作について詳しく説明します。カスタム コンポーネント内のイベント リスナーによってトリガーされた場合の状態コンソール ロギング。

問題ステートメント

指定された CodeSandbox: https://codesandbox.io/s/lrxw1wr97m を考えてみましょう。次の手順に従ってください:

1. 「カードを追加」ボタンを 2 回クリックして 2 枚のカードを作成します。
2. 最初のカードで「Button1」をクリックして、正しい数のカード (2 枚) を表示します。
3. 最初のカードで、「Button2」(イベント リスナーによって処理される) をクリックして、コンソールに 1 つのカードだけが正しく表示されていないことを確認します。

この問題は、「Button2」にアタッチされたイベント リスナー内から更新された状態を表示しようとすると発生します。

根本原因

状態表示の不一致は、イベント ハンドラーの実装方法の違いに起因します。 CardsProvider および Card コンポーネント内。

• CardsProvider: イベント ハンドラーは機能コンポーネントのスコープ内で定義され、定義時に現在の状態への参照を持つ新しい関数を作成します。
• Card: イベント ハンドラーは props として受信され、コンポーネント マウントに一度登録されます。ただし、これらのハンドラーは、現在の状態を表していない可能性がある古い状態を参照します。

解決策

いくつかのアプローチでこの問題を解決できます。

可変状態:

useRef によって提供されるような変更可能な状態値を使用して、最新の状態変更を保持できます。ただし、useState は不変状態の管理を目的としているため、このメソッドは推奨されません。

状態アップデーター関数:

状態アップデーター関数を使用すると、最新の状態を

手動イベント リスナー再登録:

または、状態が更新されるたびにイベント リスナーを再登録することもできます。現在の状態へのアクセスを保証します。

組み込みイベント処理:

可能な場合、React のネイティブ DOM イベント処理メカニズムを利用すると、手動のイベント リスナー管理の必要がなくなります。

概要

イベント リスナーの処理と状態表示の不一致は、影響を受けるコンポーネント内のイベント ハンドラーの処理が異なることが原因である可能性があります。適切なソリューションを採用することで、開発者はこの問題を軽減し、正しい状態の動作を維持できます。

以上がReact フックがイベント リスナーと一貫性のない状態の動作を示すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。