Estoy usando componentes funcionales de React. Estoy configurando el estado dentro de una llamada axios, luego llamo a la función en useEffect hook.
Aquí está mi función:
import { useDispatch } from “react-redux”; functon ABCComponent({ navigation }){ const dispatch = useDispatch(); const testPostID = "1234567891011"; const [post, setPost] = useState(""); const getPostById = async(postID)=>{ await axios.get(`http://localhost:5000/posts/post/${postID}`) .then((response) =>{ dispatch(setLoading(true)); dispatch(setSuccess(true)); dispatch(setLoading(false)); response.data.message.map((post, index) =>{ setPost(post); // I think it's complaining about this line }); }).catch((error) =>{ console.log("err: ", error); dispatch(setLoading(true)); dispatch(setSuccess(false)); dispatch(setLoading(false)); dispatch(setMessage(`${error}`)); }); }; useEffect(() =>{ getPostById(testPostID); }, []); }Estoy teniendo el siguiente error:
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 %s.%s, una función de limpieza useEffect, en ABCComponent.
Lo que probé: intenté eliminar async/await con la esperanza de que solucionara el problema, pero no fue así.
¿Cuál es la mejor manera de solucionar esto?
La fuga de memoria puede ocurrir cuando intenta actualizar el estado en un componente desmontado, como decía la advertencia. Para solucionar esto, debe incluir alguna isMounted que usará para verificar si el componente aún está montado, antes de actualizar el estado. También hay algunas otras sugerencias que le daría: no use async/await con .then, debe usar solo uno de estos dos enfoques (async/await es mi sugerencia).
Deberías reescribir algo como esto:
const isMounted = useRef(true); const testPostID = "1234567891011"; const [post, setPost] = useState(""); const getPostById = async(postID)=>{ try { dispatch(setLoading(true)); const response = await axios.get(`http://localhost:5000/posts/post/${postID}`) if(isMounted.current){ dispatch(setSuccess(true)); dispatch(setLoading(false)); response.data.message.map((post, index) =>{ setPost(post); // This part is unclear, why overriding state, and why in .map??? }); } } catch(err) { console.log("err: ", error); if(isMounted.current) { dispatch(setLoading(true)); dispatch(setSuccess(false)); dispatch(setLoading(false)); dispatch(setMessage(`${error}`)); } } }; useEffect(() =>{ getPostById(testPostID); return () => { isMounted.current = false; } }, []);También hay una parte poco clara en la que está actualizando el estado, ¿por qué usar .map y por qué anular el estado en cada iteración?