Gelung peta React.js dengan Janji async adalah tidak terhingga jika mengelilingi Promise.all.then(respon ... ) memberikan nilai respons

Question

Saya baru sahaja menghadapi masalah ini dan tidak dapat mencari sebarang sumber tentang kes saya. Saya sedang membina apl React yang menggunakan API Spotify dan ingin melaksanakan fungsi yang mengisi objek useState setempat dengan tatasusunan "ArtistInformation" (objek js dari titik akhir API).

Contoh kod ini berulang melalui tatasusunan id artis dan harus melaksanakan fungsi Api "spotiApi.getArtistInfo(id)" sekali sahaja.

Apabila dijalankan seperti ini:

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

Coretan kod berjalan dengan baik dan berhenti melaksanakan

Tetapi apabila "setArtistInfo" useState dipanggil, gelung terus dilaksanakan tanpa terhingga

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

Berikut ialah keseluruhan komponen untuk rujukan:

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>)
}

Terima kasih atas sebarang bantuan terlebih dahulu dan harap kami dapat memikirkan perkara ini!

Answer 1

Gelung tidak akan dilaksanakan tanpa henti, komponen akan dipaparkan semula tanpa henti. Ini menyebabkan paparan semula:

setArtistInfo(respList);

Ini dilaksanakan pada setiap paparan :

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

Jadi setiap render mendapat maklumat artis, yang mencetuskan render semula, yang mendapat maklumat artis, yang mencetuskan render semula, dll

Jika niatnya adalah untuk mendapatkan maklumat artis hanya pada paparan first , sertakan tatasusunan dependensi kosong:

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