React.js の非同期マップ ループ Promise.all.then(response ... ) が応答値を割り当てる場合、Promise は無限になります

Question

この問題に遭遇しましたが、私のケースに関するリソースが見つかりませんでした。 Spotify API を使用する React アプリを構築しており、ローカルの useState オブジェクトに「ArtistInformation」配列 (API エンドポイントの js オブジェクト) を設定する関数を実行したいと考えています。

このコード例は、アーティスト ID 配列を反復処理し、Api 関数「spotiApi.getArtistInfo(id)」を 1 回だけ実行する必要があります。

次のように実行すると:

リーリー

コード スニペットは正常に実行され、実行が停止します

しかし、「setArtistInfo」 useState が呼び出されると、ループは無限に実行され続けます。 リーリー

以下は参照用のコンポーネント全体です:

リーリー

事前にご協力いただきありがとうございます。解決できることを願っています。

Answer 1

ループは無限に実行されるわけではなく、コンポーネント は無限に を再レンダリングします。これにより再レンダリングが発生します:

リーリー

この はレンダリングごとに実行されます :

リーリー

したがって、各レンダリングはアーティスト情報を取得し、それが再レンダリングをトリガーし、それがアーティスト情報を取得し、それが再レンダリングをトリガーするというようになります。

最初の レンダリングでのみアーティスト情報を取得することが目的の場合は、空の依存関係配列を含めます: リーリー