Esta es una aplicación simple en reacción que obtiene los datos de la api de la nasa. La etiqueta Div se vuelve a representar continuamente (como un bucle infinito) ¿hay algún método para detener la obtención de la api después de que se cumple una promesa? También mi arr está cambiando su valor . . Gracias por adelantado.
function App() { const [arr, setarr] = useState([]); var promise = new Promise(async(resolve, reject) => { axios .get( "https://api.nasa.gov/planetary/apod?api_key=R4s5xcOxoYklREakJOSoeNMCOK4tpM8iqg6slJ15&count=2&hd=true" ) .then((res) => { //res.data[i].hdurl resolve(res.data); }); return promise; }); let show = () => { promise.then((result) => { setarr(result); }); }; //show(); return ( <> <div className="container"> {arr.map((val, i) => { return ( <div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="carousel" > <div className="carousel-indicators"></div> <div className="carousel-inner"> <div className="carousel-item active"> <img src={val.hdurl} key={i} className="d-block w-100" alt="img" ></img> <br /> </div> </div> </div> ); })} </div> </> ); } export default App;Debe colocar las solicitudes de API en el enlace useEffect. La matriz de dependencia vacía al final significa que el enlace solo se activará una vez cuando el componente se represente por primera vez. Aquí está el código:
import { useEffect } from "react"; const App = () => { const [arr, setArr] = useState([]); useEffect(() => { axios .get( "https://api.nasa.gov/planetary/apod?api_key=R4s5xcOxoYklREakJOSoeNMCOK4tpM8iqg6slJ15&count=2&hd=true" ) .then((res) => { setArr(res.data); }); }, []); return ( <> <div className="container"> {arr.map((val, index) => { return ( <div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="carousel" key={index} > <div className="carousel-indicators"></div> <div className="carousel-inner"> <div className="carousel-item active"> <img src={val.hdurl} className="d-block w-100" alt="img" ></img> <br /> </div> </div> </div> ); })} </div> </> ); }; export default App;