Soy nuevo en reaccionar. Aquí estoy obteniendo datos de una API y comprobando si hay valores nulos presentes en uno de los atributos. Si es así, el código arroja un error de "Módulo no encontrado". El error se lanza pero no se captura en el bloque catch. El registro en el bloque catch no aparece cuando se lanza el error. ¿¿Qué estoy haciendo mal??
useEffect(() => { let isMounted = true; const fetchData = async () => { try { const res = await fetch(url); if (!res.ok) { throw Error("Unable to request data for this resource"); } if (isMounted) { const data = await res.json(); if (data.modInfo === null) { throw Error("Module not found"); } setmodInfo(data.modInfo); setIsLoading(false); setError(null); } } catch(err) { setIsLoading(false); setError(err.message); console.log('err', err.message); } }; fetchData(); return () => { isMounted = false; }; }, [url]);¿Podría funcionar de la manera que pretende si hace que isMounted sea con estado?
Mueve esto fuera de useEffect :
let isMounted = true;Y cambiar a:
const [isMounted, setIsMounted] useState(true);Y cambia esto:
return () => { isMounted = false; };a:
return () => { setIsMounted(false); };El problema fue con el orden de las actualizaciones de estado en isLoading y el error , así como con mis condiciones para la representación condicional de componentes secundarios.
En useEffect() :
setIsLoading(false); setError(err.message); console.log('err', err.message);En declaración de retorno del componente:
return ( <> {isLoading && <h2>Loading...</h2>} {error && <h2>Module not found</h2>} {!isLoading && !error && ( ... ) Supongo que una vez que isLoading se configuró en true , la tercera condición pasó antes de que se pudiera actualizar el error , ya que las actualizaciones de estado son asíncronas. Se corrigió esto actualizando error antes de isLoading en el bloque catch y verificando el error primero en el renderizado.
useEffect() fijo:
useEffect(() => { let isMounted = true; const fetchData = async () => { try { const res = await fetch(url); if (!res.ok) { throw Error("Unable to request data for this resource"); } if (isMounted) { const data = await res.json(); if (data.modInfo === null) { console.log("found null") throw Error("Module not found"); } setmodInfo(data.modInfo); setError(null); setIsLoading(false); } } catch(err) { setError(err.message); console.log(err.message); setIsLoading(false); } }; fetchData(); return () => { isMounted = false; }; }, [url]);Declaración de retorno fijo:
return ( <> {error && <h2>Module not found</h2>} {isLoading && <h2>Loading...</h2>} {!isLoading && !error && ( ... )