首页  >  问答  >  正文

带有异步 Promise 的 React.js 映射循环是无限的,如果周围的 Promise.all.then(response ... ) 分配响应值

我刚刚遇到这个问题,找不到任何关于我的案例的资源。 我正在构建一个使用 Spotify API 的 React 应用程序,并想要执行一个函数,该函数用“ArtistInformation”数组(一个来自 API 端点的 js 对象)填充本地 useState 对象。

此代码示例循环访问艺术家 id 数组,并且应该仅执行 Api 函数“spotiApi.getArtistInfo(id)”一次。

像这样运行时:

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

代码片段运行良好并停止执行

但是当调用“setArtistInfo”useState 时,循环会继续无限执行

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

以下是整个组件供参考:

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

感谢您提前提供的任何帮助,希望我们能解决这个问题!

P粉895187266P粉895187266425 天前435

全部回复(1)我来回复

  • P粉819533564

    P粉8195335642023-09-15 12:18:13

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

    setArtistInfo(respList);

    在每次渲染时执行

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

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

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

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

    回复
    0
  • 取消回复