Die Map-Schleife von React.js mit asynchronem Promise ist unendlich, wenn das umgebende Promise.all.then(response ... ) einen Antwortwert zuweist

Question

Ich bin gerade auf dieses Problem gestoßen und konnte keine Ressourcen zu meinem Fall finden. Ich erstelle eine React-App, die die Spotify-API verwendet, und möchte eine Funktion ausführen, die ein lokales useState-Objekt mit einem „ArtistInformation“-Array (einem js-Objekt vom API-Endpunkt) füllt.

Dieses Codebeispiel durchläuft das Künstler-ID-Array und sollte die API-Funktion „spotiApi.getArtistInfo(id)“ nur einmal ausführen.

Beim Lauf so:

const getArtistInformation = () => {
    console.log("sp ids",spotifyArtistIds)
    Promise.all(spotifyArtistIds.map(id => {
      return spotiApi.getArtistInfo(id)
    })).then(respList => {
      // setArtistInfo(respList)
      console.log("artistInfo", artistInfo)})
  }

Code-Snippet läuft einwandfrei und wird nicht mehr ausgeführt

Aber wenn „setArtistInfo“ useState aufgerufen wird, wird die Schleife unendlich weiter ausgeführt

const getArtistInformation = () => {
    console.log("sp ids",spotifyArtistIds)
    Promise.all(spotifyArtistIds.map(id => {
      return spotiApi.getArtistInfo(id)
    })).then(respList => {
      setArtistInfo(respList)
      console.log("artistInfo", artistInfo)})
  }

Hier ist die gesamte Komponente als Referenz:

import { Box } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import SpotifyApi from "../../api/SpotifyApi";

export const DashboardView = () => {
  const spotifyArtistIds = useSelector(state => state.member.spotifyArtistIds)

  const [artistInfo, setArtistInfo] = useState([])
  const [showId, setShowId] = useState(spotifyArtistIds[0])
  const spotiApi = new SpotifyApi();

  const getArtistInformation = () => {
    console.log("sp ids",spotifyArtistIds)
    Promise.all(spotifyArtistIds.map(id => {
      return spotiApi.getArtistInfo(id)
    })).then(respList => {
      // setArtistInfo(respList)
      console.log("artistInfo", artistInfo)})
  }
 

  const getThisArtistInfo = () => {
    console.log("art", artistInfo)
    return artistInfo.filter(info => info.data.id === showId)[0].data
  }
  
  useEffect(() => {
    getArtistInformation()
  })

  return (
    <Box>
      <h2>{getThisArtistInfo()?.name}'s Dashboard</h2>

    </Box>)
}

Vielen Dank für jede Hilfe im Voraus und ich hoffe, wir können das herausfinden!

Answer 1

循环不会无休止地执行，组件会无休止地重新渲染。这会导致重新渲染：

setArtistInfo(respList);

这在每次渲染时执行：

useEffect(() => {
  getArtistInformation();
});

因此每次渲染都会获取艺术家信息，从而触发重新渲染，从而获取艺术家信息，从而触发重新渲染，等等

如果目的是仅在第一次渲染上获取艺术家信息，请包含一个空的依赖项数组：

useEffect(() => {
  getArtistInformation();
}, []); // <-- here