React イベント リスナーは機能コンポーネント内で予期しない状態変化を表示しますか?

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

このお問い合わせでは、React フックの操作中に問題が発生しました。イベント リスナーを利用してボタンのクリックを処理すると、コンソール ログに不正な状態が表示されます。

問題の説明

提供された CodeSandbox で、次の手順に従ってください。 :

1. [カードの追加] ボタンを 2 回クリックして 2 つのカードを作成します。
2. 最初のカードについては、[Button1] をクリックし、コンソールでカードの存在が正しく記録されていることを確認します。 2 つのカード。
3. 最初のカードでは、イベント リスナーによって制御される「Button2」をクリックします。コンソールに 1 枚のカードしか表示されないことに注目してください。

最初のカードの「Button2」には 2 枚のカードの存在も表示されるはずなので、この動作は予期せぬものです。

この問題は、CardsProvider コンポーネントと Card コンポーネントでのイベント ハンドラー処理の違いに起因します。

• CardsProvider: イベント ハンドラーは次のとおりです。コンポーネントがレンダリングされるたびに再作成され、定義時に古い状態を参照します。
• Card: イベント ハンドラーはコンポーネントのマウント時に登録され、props として渡されたときに新しい状態を受け取ります。ただし、1 つのイベント ハンドラー (handleCardClick) は 1 回だけ登録され、古い状態を永続的に参照します。

解決策のアプローチ

この問題に対処するには、次のことを慎重に検討する必要があります。イベント処理は、useState フックを使用して機能コンポーネントでアプローチします。以下にいくつかのオプションがあります:

1. Mutable State:

現在の状態を保持する可変オブジェクトを導入するには、useState の代わりに useRef を使用します。このアプローチでは状態を直接変更できますが、React 開発で推奨されるプラクティスに反します。

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

イベント リスナーが登録されるたびに、外側のスコープから古い状態ではなく新しい状態を受け取る状態アップデーター関数を渡します。これにより、イベント リスナーは常に最新の状態にアクセスできるようになります。

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

状態が変化するたびにイベント リスナーを再登録します。これにより、コールバックが常に最新の状態情報を受け取ることが保証されます。

4.組み込みイベント処理:

コンポーネントのスコープ内のイベント リスナーの場合は、JSX 内でイベント リスナーを直接定義することで、React の組み込みイベント処理を利用します。これにより、useEffect の必要性がなくなり、イベント リスナーが常に現在の状態を受け取ることが保証されます。

以上がReact イベント リスナーは機能コンポーネント内で予期しない状態変化を表示しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。