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 ( {getThisArtistInfo()?.name}'s Dashboard
) }
Terima kasih atas sebarang bantuan terlebih dahulu dan harap kami dapat memikirkan perkara ini!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Gelungtidak akan dilaksanakan tanpa henti, komponenakan dipaparkan semulatanpa henti. Ini menyebabkan paparan semula:
Inidilaksanakan 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 paparanfirst, sertakan tatasusunan dependensi kosong:
useEffect(() => { getArtistInformation(); }, []); // <-- here