0
190
ViewsCuando solicito json de google youtube-data-api, nunca deja de enviar solicitudes de obtención y agota mi límite de API por día en minutos
Soy nuevo en reaccionar y quería crear un componente de aplicación similar a un reproductor de YouTube que almacene todos los videos de una lista de reproducción de YouTube y muestre la lista de reproducción en el lado derecho de mi escritorio (imagen a continuación), así que un amigo mío me dio este código pero algo está mal, funciona bien al principio, pero después de unos minutos agota mi API de Google por límite de día y no devuelve nada, como puede ver, el bloque div de la lista de reproducción correcta está vacío ahora en la imagen a continuación.
Por favor, ayúdame a descubrir por qué envía infinitas solicitudes de obtención.
* No pude obtener la captura de pantalla de la consola a tiempo, pero en ese momento había muchos errores de solicitud de obtención.
Código a continuación:
import axios from 'axios'; import React from 'react' import { useState } from "react"; export default function PlayerItem() { const [data, setData] = useState([]); const details = [] async function gettingData() { await axios.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLu0W_9lII9aiL0kysYlfSOUgY5rNlOhUd&key=[myKey]').then(res => { setData(res.data.items) }); } gettingData(); data.forEach(element => { details.push(element.snippet.title) }); // console.log(details); return ( <> {details.map((title, index) => ( <div className="pl-item" key={index}> <strong>Video {index + 1}</strong> : {title}. </div> ) )} </> ) } 
1 answers
Answer question0
import axios from "axios"; //import useEffect from React import React, { useEffect, useState } from "react"; //Dont need to import these seperately //import { useState } from "react"; export default function PlayerItem() { const [data, setData] = useState([]); const details = []; async function gettingData() { await axios .get( "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLu0W_9lII9aiL0kysYlfSOUgY5rNlOhUd&key=[myKey]" ) .then((res) => { setData(res.data.items); }); } //gettingData() **** //if we put this into a useEffect then we can stop it re-firing on every render //at the end there is a an array of states / objects that when they are changed they //useeffect will refire. If we leave this empty then it only fires on the page loading useEffect(() => { gettingData(); }, []); data.forEach((element) => { details.push(element.snippet.title); }); // console.log(details); return ( <> {details.map((title, index) => ( <div className="pl-item" key={index}> <strong>Video {index + 1}</strong> : {title}. </div> ))} </> ); }Como alguien ya ha comentado, implemente useEffect para que no se active en cada nueva representación (lo que se debe a la configuración del estado). Tener una matriz de dependencia vacía al final de useEffect lo llamará al cargar la página.