React フックでイベント リスナーを使用してイベントを処理するときに状態が正しくないのはなぜですか?

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

問題: React フックを使用し、イベント リスナーでイベントを処理すると、コンソールに状態が表示されるは間違っています。具体的には、カード内のボタンをクリックすると、更新された状態 (カードの数) が表示されるはずですが、元の状態が誤って表示されます。

コードの説明:

問題この問題は、useState フックを使用してイベント リスナーが機能コンポーネントに登録される方法によって発生します。提供された例では、handleCardClick 関数は CardsProvider 機能コンポーネント内で定義されており、呼び出されるときに常に初期状態を参照します。

一方、handleButtonClick は Card 機能コンポーネントで定義され、小道具。レンダリングのたびに再登録されるため、新しい状態が参照されます。したがって、handleCardClick は間違った状態を表示しますが、handleButtonClick は正しい状態を表示します。

解決策:

1.可変状態:

useState の代わりに useRef を使用して可変状態を保存します。ただし、このアプローチは、クラス コンポーネントと関数コンポーネントの両方でアンチパターンであるため、状態の更新には推奨されません。

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

古い状態の代わりに新しい状態を受け取るイベント リスナー内で状態アップデーター関数を使用します。

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

イベント リスナーを毎回再登録して、最新の状態にアクセスできるようにします。

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

onClick={eventListener} などのイベント リスナーを DOM イベント ハンドラーに直接渡すことで、React の組み込みイベント処理を使用します。

注: React 16.8 の最終バージョンでは、useState は不変状態のみをサポートします。したがって、元の回答で説明されている可変状態の解決策は適用できなくなりました。

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