UseEffect によってトリガーされる無制限の API 呼び出し

Question

コンポーネント FrindListWidget が 2 つの条件で呼び出される MERN プロジェクトを構築しました。

1. それがユーザー自身の フレンド リスト の場合、ウィジェットがレンダリングされ、Redux user.friends のステータスが更新されます。
2. 別のユーザーの場合は、ウィジェットのみが表示されます。 Redux の状態は更新されません。

各 Friend には、Friend を追加または削除する も含まれています。 どうやら、Chrome デベロッパー ツールの [ネットワーク] タブを確認するまでは、すべてが正常に動作していたようです。 friends が無限回呼び出されていることがわかりました。明確にするために、console.log("friends",friends); と書きました。はい、何度も録音されています。 次のコードを共有します:

FriendListWidget.jsx

リーリー

Friend.jsx

リーリー

userRequest は単なる axios メソッドです:

リーリー

useEffect フックの依存関係を削除してみました:

リーリー

ただし、レンダリングは 1 回だけです。実行時に を介した更新は表示されません。更新を確認するにはウィンドウをリロードする必要があります。

Answer 1

useEffect に挿入したユーザーのリストを更新する getFriends() 関数を呼び出していると仮定します。したがって、useEffect 自体を無限に更新するため、useEffect を別の値に依存させるようにしてください。

リーリー

このケースでは、私は個人的にreact-queryを使用し、enabled属性を使用してAPIを再度呼び出すタイミングを決定しますが、ロジックに重大な問題があり、理解できません。 CodeSandBox などのプラットフォームを使用して作成してください。問題の再現可能な最小限の例があれば、より適切にサポートできるようになります。