問題タブ [use-state]

私のフック useState は、状態を一度だけ変更します。常に 1 です。どうすれば修正できますか?

React、Socket.io、および Express を使用して、最初の websocket アプリケーションを構築しています。私はこれをフック API を学ぶ機会として利用しようとしてきましたが、少しトリッキーであることがわかりました。

最初のレンダリング後にのみ実行される useEffect 内のクライアント アプリのソケットにリスナーを確立します (2 番目の引数として空の配列を渡します)。リスナーは、ユーザーがこのクライアント アプリケーションからログインすると機能しますが、2 番目のウィンドウを開いて別の接続からログインすると、そのアプリケーションに再登録されません。2 番目のウィンドウには、サーバーからのユーザーの正しい配列が表示されます。

アプリがこのように動作する理由についての説明を探しています。この場合、useState の代わりに useReducer を使用する必要があるという推奨事項を読みましたconsole.logが、ソケットのイベント リスナーのコールバックがまだ何も登録していないため、どのように違いが生じるかわかりません。この例でも、作成者は、状態を変更して再レンダリングをトリガーする必要があることを説明しています。また、useEffect の 2 番目の引数として空の配列を使用しましたが、イベント リスナーがそこに確立されているため、問題にはなりません。

接続を開いたり閉じたりする複数の useEffects を記述したり、複数のイベント リスナーを再度書き直したりする状況を回避しました。

ページの上部で接続を確立します。

ここで useState を使用して状態を作成します。

次に、最初の useEffect フックを使用して、localStorage にログインしているユーザーをチェックし、ソケットにイベント リスナーを追加します。

前述のように、ユーザーがフォームを使用してログインしたとき、または localStorage で見つかったとき、リスナーは初めて完全に機能します。サーバーに登録し、サーバーは「backendUsers」を発行して、更新が発生したことを通知します。しかし、別の (シークレット) ウィンドウに別のユーザーを追加すると、2 番目のユーザーがログインしたときに「backendUsers」が出力されますが、リスナーは再びキャッチされません。2 番目のウィンドウにはユーザーの最新のリストがありますが、最初のウィンドウでは、コンソールにログインしたユーザーの更新された配列と再レンダリングが期待されます。これは、状態が更新され、ユーザーが DOM に正しくリストされていることを示しています。

これが私のフロントエンドコードの全体です：

サーバー側のコードは次のとおりです (ここでは Express.js を使用しています)。監視する主なリスナーは次のloginとおりです。