React调用Spotify API触发循环请求及426限流问题求助

我正在使用ReactJS与spotify-web-api-node包，通过Spotify API获取个人最常收听的艺人数据，开发中使用了useState和useEffect Hook。运行应用时，getMyTopArtists函数会持续循环执行，直至触发426状态码（代表达到请求速率限制）。请问该如何修复此问题？

相关代码 #

const [topArtists, setTopArtists] = useState([]);

useEffect(() => {
      if (!accessToken) return
      
      spotifyApi.getMyTopArtists({limit: 5, time_range: 'medium_term'}).then(res => {
        setTopArtists(res.body.items.map(artist => {
          return{
            name: artist.name,
            uri: artist.uri,
            cover: artist.images.uri,
            genre: artist.genres,
          }
        }))
      })
    }, [topArtists, accessToken])

问题原因 #

无限循环的核心原因是useEffect的依赖数组里包含了topArtists：每次API请求成功后调用setTopArtists更新状态，这会触发useEffect因为依赖项变化重新执行，再次发起API请求，进而再次更新topArtists，形成无限循环，最终触发Spotify的速率限制。

修复方案 #

1. 移除不必要的依赖：把topArtists从useEffect的依赖数组中删除，只保留accessToken——我们只需要在accessToken获取到或者变化时才发起请求，请求结果不需要作为触发请求的条件。
2. 修复图片访问的小问题：artist.images是一个数组，直接访问.uri会报错，应该取数组第一个元素并做可选链处理，避免没有图片时出现错误。

修改后的代码 #

const [topArtists, setTopArtists] = useState([]);

useEffect(() => {
  if (!accessToken) return
  
  spotifyApi.getMyTopArtists({limit: 5, time_range: 'medium_term'}).then(res => {
    setTopArtists(res.body.items.map(artist => {
      return {
        name: artist.name,
        uri: artist.uri,
        cover: artist.images[0]?.uri,
        genre: artist.genres,
      }
    }))
  })
}, [accessToken]) // 仅保留accessToken作为依赖

内容的提问来源于stack exchange，提问作者leoprosy