Estoy creando un sitio web que recupera y muestra mis listas de reproducción, todo funcionó bien ayer, esta mañana, aunque no toqué el código, tengo un error 429 cada vez que quiero recuperar datos en la API.
Mi código :
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 }He probado con y sin axios, ese no es el problema.
Uso esta función en una clase de componente React aquí:
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() }componentDidUpdate() es un enlace de ciclo de vida que ejecuta el código dentro de él cada vez que el componente se vuelve a renderizar.
Un componente en React se actualiza cada vez que hay un cambio en su estado o en sus accesorios.
searchPlaylists() establece el estado, lo que provoca una nueva representación.
En otras palabras, ha creado un bucle infinito en el que actualiza el estado en cada renderizado, lo que provoca otro renderizado y envía una solicitud de API cada vez.