Estoy usando react js, y cuando renderizo la página, se implementa un useEffect para solicitar al servidor express obtener datos de la base de datos, esto funciona, pero si el servidor está inactivo, seguirá solicitando miles de veces hasta que la aplicación se bloquee. ¿Hay alguna manera de establecer un retraso entre cada nueva solicitud? ¿O hay una solución más ordenada para esto?
A continuación se muestra mi código:
useEffect(() => { async function fetchData() { setisLoaded(false); axios .get("localhost:3001/locations") .then((response) => { if (response.data) { setLocations(response.data[0]); setTown(response.data[1]); setTowns(response.data[1]); setDistrict(response.data[2]); setDistricts(response.data[2]); setGovernorate(response.data[3]); setSector(response.data[4]); setSubSector(response.data[5]); setSubSectors(response.data[5]); setlicenseType(response.data[6]); setmarkerGroup(true); setZoomLevel(8); setisLoaded(true); } }) .catch((e) => { seterrorFetchedChecker((c) => !c); }); } fetchData(); }, [errorFetchedChecker]);Y el código expreso es:
app.get("/locations", async (req, res) => { try { const sqlFetch = "SELECT * FROM industries_db; SELECT * FROM towns ORDER BY value; SELECT * FROM districts ORDER BY value ; SELECT * FROM governorates ORDER BY value; SELECT * FROM sectors ORDER BY value; SELECT * FROM sub_sectors ORDER BY value; SELECT * FROM licensetype ORDER BY value "; await db.query(sqlFetch, async (err, result) => { if (err) { console.log(err); res.sendStatus(500); } else if (result.length > 0) { return res.send(result); } }); } catch (error) { res.sendStatus(500); } });Sé que mi código no es tan profesional, todavía soy nuevo en el desarrollo web, no dude en hacer comentarios para mejorar el flujo y darme consejos sobre técnicas de codificación.
¡Gracias!
Esto se debe a que cada vez que tiene un error en su solicitud, actualiza el estado y la función useEffect se activa una y otra vez.
Puede implementar una verificación basada en el error con esta lógica:
si hay un error en la solicitud, espere una cantidad de tiempo predefinida y obtenga los datos; de lo contrario, obtenga los datos inmediatamente:
useEffect(() => { async function fetchData() { setisLoaded(false); axios .get("localhost:3001/locations") .then((response) => { if (response.data) { setLocations(response.data[0]); setTown(response.data[1]); setTowns(response.data[1]); setDistrict(response.data[2]); setDistricts(response.data[2]); setGovernorate(response.data[3]); setSector(response.data[4]); setSubSector(response.data[5]); setSubSectors(response.data[5]); setlicenseType(response.data[6]); setmarkerGroup(true); setZoomLevel(8); setisLoaded(true); } }) .catch((e) => { seterrorFetchedChecker((c) => !c); }); } if(errorFetchedChecker){ setTimeout(()=>{ fetchData(); },[1000])// 1 second } else { fetchData(); } }, [errorFetchedChecker]);Otra solución es usar la política de reintento de axios y evitar actualizar el estado con el error si ya hubo un error, pero la primera solución es lo suficientemente buena.