Hola, creé un gancho React para manejar las solicitudes de Axios. El problema que tengo es que no puedo cancelar con éxito la solicitud para evitar la pérdida de memoria. Cuando cambio entre 2 páginas que usan el gancho, aparece el error:
No se puede realizar una actualización de estado de React en un componente desmontado. Esto no es operativo, pero indica una pérdida de memoria en su aplicación. Para solucionarlo, cancele todas las suscripciones y tareas asincrónicas en una función de limpieza useEffect.
Use el código de enlace de Axios:
import { useState, useEffect } from "react"; import axios from "axios"; const useAxios = (url, method = "GET") => { const [data, setData] = useState([]); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [body, setBody] = useState(null); useEffect(() => { const controller = new AbortController(); const getData = async (body) => { setLoading(true); try { const res = body ? await axios.post(url, body, { signal: controller.signal, }) : await axios.get(url, { signal: controller.signal, }); setData(res.data); setError(null); setLoading(false); } catch (err) { console.log(err.message); setError(err.message); setLoading(false); } }; if (method === "GET") { getData(); } else if (method === "POST") { getData(body); } return () => { controller.abort(); }; }, [url, method, body]); return { data, error, loading, setBody }; }; export default useAxios;Su setError y setLoading se activarán al abortar.
Por lo tanto, querrá establecer una bandera en la devolución de llamada de desmontaje. Luego puede llamar condicionalmente a setError / setLoading en función de esto.
useEffect(() => { let aborting = false; try { .... } catch (err) { console.log(err.message); if (!aborting) { setError(err.message); setLoading(false); } } .... return () => { aborting = true; controller.abort(); } }, ...prevenir la fuga de memoria
Solo una nota, esta herida en realidad no es una pérdida de memoria, es solo una advertencia de que podría provenir de uno. p.ej. usando addEventListener sin removeEventListener . Pero en cualquier caso, aún querrá evitar un setState en un componente desmontado.