0
137
VistasReaccionar: el estado no está actualizado cuando desmonto el componente
En mi trabajo tengo que hacer una solicitud http cuando alguien sale de la página. Mi idea era hacer esta solicitud cuando se desmonta el componente de esa página.
Si lo entiendo correctamente, esto se puede hacer poniendo lógica en la función de retorno de useEffect. Cuando hago esto, se activa en el momento adecuado, pero los valores de estado que quiero usar no están actualizados. ¿Hay alguna manera de obtener valores actualizados?
useEffect(() => { return () => { //this runs on unmount // but the state changes that happened are not registered it seems } }, [])He creado un ejemplo simple en codesandbox: cuando cambia el estado de 4 a 8 y luego oculta el componente. el valor NUM en el desmontaje sigue siendo 4 (verifique el registro de la consola). ¿Cómo puedo obtener el valor del estado actual cuando desmonto el componente?
https://codesandbox.io/live/b6e65d13114
https://codesandbox.io/s/loving-galois-okb0b (no estoy seguro de qué enlace compartir es mejor)
2 Respuestas
Responde la pregunta0
Puede usar una referencia de React para almacenar en caché una copia del estado para acceder a la función de limpieza.
import { useEffect, useRef, useState } from "react"; export const NumCheck = () => { const [num, setNum] = useState(4); const stateRef = useRef(); // <-- ref to cache state value useEffect(() => { stateRef.current = num; // <-- cache state value on change }, [num]); useEffect(() => { return () => { console.log("NUM CHECK", stateRef.current); // <-- access cached state value }; }, []); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>click the button to change number</h2> <button onClick={() => setNum(8)}>click me</button> <br /> <br /> <h5>{num}</h5> </div> ); }; 
0
Cada vez que muestra el componente NumCheck, num se asigna a 4 nuevamente.
Creo que puede resolver su problema enviando el estado num como accesorio al componente NumCheck. Con eso, no importa si el componente NumCheck se vuelve a representar nuevamente, el estado de num se asigna al componente principal (en su caso, permanecerá 8).
Componente de verificación numérica:
import "./styles.css"; import { useEffect, useState } from "react"; export const NumCheck = ({ num, setNum }) => { useEffect(() => { return () => { console.log("NUM CHECK", num); }; }, []); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>click the button to change number</h2> <button onClick={() => setNum(8)}>click me</button> <br /> <br /> <h5>{num}</h5> </div> ); };componente de la aplicación
export default function App() { const [show, setShow] = useState(true); const [num, setNum] = useState(4); return ( <> {show ? ( <div> <NumCheck num={num} setNum={setNum} /> <button onClick={() => setShow(!show)}>hide the component!</button> </div> ) : ( <div> <h5>hidden</h5> <button onClick={() => setShow(!show)}>show the component!</button> </div> )} </> ); }