Aquí está mi código:
import React from "react"; import { useState, useEffect } from "react"; import TutorialList from "./TutorialList"; import PropTypes from "prop-types"; const Home = () => { const [tutorials, setTutorials] = useState(null); useEffect(() => { console.log("Fetching data"); fetch("http://192.168.212.52:8080/api/tutorials/all/") .then((res) => { return res.json(); console.log("Getting json from response"); }) .then((data) => { console.log(data); setTutorials(data); }); }, []); return ( <div className="home"> {console.log(tutorials)} {tutorials && ( <TutorialList tutorials={tutorials} title={"All tutorials"} /> )} </div> ); }; Home.propTypes = { title: PropTypes.string, }; export default Home;Espero que esto haga 1 solicitud de obtención al servidor, que devuelve los datos que luego se procesan con reaccionar.
Lo que realmente hace es realizar más de 10 solicitudes al servidor, y aún procesa los datos después de que finalizan todas las solicitudes. Puedo ver las solicitudes tanto de los registros del servidor como de las herramientas de desarrollo de redes del navegador.
Sin embargo, Fetching data y Getting json from response solo se ejecutan una vez, como se esperaba.
Dado que fetch solicita un recurso de la red, se ejecuta de forma asíncrona. Dicho esto, si desea ejecutarlo dentro de un useEffect , podría ser que si lo envuelve en una async function , debería funcionar. Sin embargo, tenga en cuenta que no es el argumento de este gancho en sí mismo async , sino otra función que define dentro. Por ejemplo,
useEffect(() => { console.log("Fetching data"); async function retrieveData() { const json = await fetch("http://192.168.212.52:8080/api/tutorials/all/") const data = await response.json() setTutorials(data) console.log("Got json from response"); } retrieveData() }, []);