我在单个请求中使用 spotify api 出现错误 429

Question

我正在制作一个网站来检索和显示我的播放列表，昨天一切正常，今天早上我没有触摸代码，每次我想在 api 上检索数据时都会出现错误 429。

我的代码：

export const getUserPlaylist=async(params=null){
   params={
      params,
      headers:{'Authorization': `Bearer ${AccessToken}`}
   }
   const response=await axios.get("https://api.spotify.com/v1/me/playlists", params)
   return response.data
}

我尝试过使用和不使用 axios，这不是问题。

我在这里的 React 组件类中使用了这个函数：

async searchPlaylists(){
    if(!this.state.allPlaylists){
        const response=await getUserPlaylist({limit:50})
        this.setState({allPlaylists:response.items})
    }
    let playlists=[]
    for(let i of this.state.allPlaylists){
        if(i.name.indexOf(this.props.playlistName)===0){
            playlists.push(new Playlist(i))
            if(playlists.length===3) break
        }
    }
    this.setState({playlists})
}
async componentDidMount(){
    this.searchPlaylists()
}
async componentDidUpdate(){
    this.searchPlaylists()
}

Answer 1

componentDidUpdate() 是一个生命周期钩子，每次组件重新渲染时都会在其中运行代码。
React 中的组件会在其状态或道具发生变化时更新。
searchPlaylists() 设置状态，这会导致重新渲染。
换句话说，您创建了一个无限循环，您在每次重新渲染时更新状态，这会导致另一个重新渲染，每次都发送一个 API 请求。

For more in-depth information.