¿Cómo puedo solucionar este error en mi reacción nativa? Consulte el código a continuación.
Advertencia: 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.
const getData = () => { setIsLoading(true) axios.get(hosturl.loaduser + userlist.user_id + '&page=' +currentPage) .then((response) => { setEvent([...userData, ...response.data.data]) setIsLoading(false) }) } useEffect(() => { getData(); }, [currentPage]);Hice algo como esto, vea a continuación, pero el error sigue apareciendo.
useEffect(() => { let isMounted = true; if (isMounted) getData(); return () => { isMounted = false }; }, [currentPage]);function MyComponent() { const mounted = useRef(false); const getData = () => { setIsLoading(true) axios.get(hosturl.loaduser + userlist.user_id + '&page=' +currentPage) .then((response) => { if (mounted.current) { setEvent([...userData, ...response.data.data]) setIsLoading(false) } }) } useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []); useEffect(() => { if (mounted.current) { getData(); } }, [currentPage]); return ( ... ); } El gancho useEffect() , que debe manejar la referencia mounted , se llama cuando el componente está montado y establece el valor mutable mounted.current en verdadero. La función de retorno del gancho useEffect() se llama cuando el componente se desmonta y establece el valor mounted.current en false .
Después de eso, puede usar la referencia mounted (es como una variable miembro en los componentes de clase de estilo antiguo). Es decir, para obtener sus datos, solo si su componente está montado, o establezca el estado en devolución de llamada, solo si el componente está montado.
Podrías usar axios Cancelación:
const controller = new AbortController(); const getData = () => { setIsLoading(true) axios.get(hosturl.loaduser + userlist.user_id + '&page=' +currentPage, { signal: controller.signal }).then((response) => { setEvent([...userData, ...response.data.data]) setIsLoading(false) }) } useEffect(() => { getData(); return () => { controller.abort(); }; }, [currentPage]); De esta manera, está abortando axios get on desmontar el componente, evitando setEvent y setIsLoading (y luego la advertencia).