Promise.all.then(response ... ) 주변이 응답 값을 할당하는 경우 비동기 Promise가 있는 React.js 맵 루프는 무한합니다.

Question

방금 이 문제가 발생했는데 내 사건에 대한 리소스를 찾을 수 없었습니다. 저는 Spotify API를 사용하는 React 앱을 구축 중이며 "ArtistInformation" 배열(API 끝점의 js 개체)로 로컬 useState 개체를 채우는 함수를 실행하려고 합니다.

이 코드 예제는 아티스트 ID 배열을 반복하며 Api 함수 "spotiApi.getArtistInfo(id)"를 한 번만 실행해야 합니다.

다음과 같이 실행하는 경우:

으아악

코드 조각이 정상적으로 실행되고 실행이 중지됩니다

그러나 “setArtistInfo” useState가 호출되면 루프는 무한히 계속 실행됩니다

으아악

참조용 전체 구성 요소는 다음과 같습니다.

으아악

미리 도움을 주셔서 감사합니다. 이 문제를 해결할 수 있기를 바랍니다!

Answer 1

루프 는 끝없이 실행되지 않으며 구성 요소 는 끝없이 다시 렌더링 됩니다. 이로 인해 다시 렌더링이 발생합니다.

으아악

이 는 모든 렌더링 에서 실행됩니다.

으아악

그래서 모든 렌더링은 아티스트 정보를 가져오며, 이는 재렌더링을 트리거하고 아티스트 정보를 가져와 재렌더링을 트리거합니다.

첫 번째 렌더링에서만 아티스트 정보를 얻으려는 경우 빈 종속성 배열을 포함하세요. 으아악