Creo app.get para devolver el token de Spotify
aquí está el código:
axios({ url: "https://accounts.spotify.com/api/token", method: "POST", headers: { Authorization: "Basic " + Buffer.from(clientId + ":" + clientSecret).toString("base64"), "Content-Type": "application/x-www-form-urlencoded", }, params: { grant_type: "refresh_token", refresh_token: refreshToken, }, }) .then((response) => { res.json({ accessToken: response.data.access_token, expiresIn: response.data.expires_in, }); }) .catch((error) => console.log(error.statusCode)); });y una función en el lado del cliente cada vez que llamo, devolverá el token, pero cuando la consola registre el código a continuación, se imprime sin parar
aquí el código:
let getData = () => { axios.request("http://localhost:3001/refresh_token").then((response) => { SetToken(response.data); setExpires(response.data.expiresIn); console.log(token); }); }; useEffect(() => { const data = setInterval(() => { getData(); }, 1000); }); return ( <div className="spotify"> <button onClick={() => { getData(); }} > click </button> </div> );gracias
A su useEffect le falta una matriz de dependencia, por lo que se llamará para cada renderizado de su componente (y lo que es peor, creará un nuevo intervalo de tiempo de espera que nunca se borra cada vez). Asumiré con valentía que setToken y setExpires son establecedores de estado para el componente, por lo que provocarían reprocesamientos.
Necesitarás
useEffect(() => { const dataTimer = setInterval(() => { getData(); }, 1000); return () => clearInterval(dataTimer); }, []); // <- this empty dependency arraypor lo tanto, solo se llamará una vez cuando se monte su componente, por lo que el intervalo se limpiará cuando se desmonte.
( getData también debería estar en esa matriz de dependencia, pero dado que aparentemente no lo está memorizando usando useCallback , eso negaría el beneficio de la matriz vacía, ya que la identidad de getData también cambiaría en cada renderizado...)