Estoy tratando de actualizar una variable después de una llamada a la API, pero usaré un evento de clic para esta pregunta.
Como puede ver, la variable que imprimo usa el estado anterior en el primer clic, ya que aún no registra el cambio. En las siguientes llamadas, la variable se imprime con el nuevo texto.
¿Hay alguna forma de usar la variable actualizada inmediatamente dentro de la función changeText?
https://stackblitz.com/edit/react-36jqi3
export default function App() { const [text, setText] = useState('inital text'); const changeText = () => { setText('new text'); console.log(text); }; return ( <div> <button onClick={changeText}>Update variable</button> </div> ); }No.
La función changeText que se está ejecutando actualmente se habrá cerrado sobre el valor del text del valor asignado durante el procesamiento que creó la función changeText .
La siguiente representación del componente generará una nueva función changeText y la asignará a onClick .
Si desea utilizar el valor que acaba de pasar a setState , guarde una copia de ese valor en otro lugar.
const changeText = () => { const newValue = 'new text'; setText(newValue); console.log(newValue); };Alternativamente, haga el trabajo que necesita el nuevo valor en un gancho de efecto que se activa cuando cambia ese valor.
useEffect(() => { console.log(text); }, [text]); const changeText = () => { setText('new text'); };Sin embargo, eso también activará el enlace en el renderizado inicial , por lo que es posible que desee agregar una prueba adicional para asegurarse de que no sea el valor inicial antes de iniciar sesión.
Puede pasar.
export default function App() { const [text, setText] = useState('inital text'); const changeText = () => { /* Calling updater to get the latest value. */ setText('new text'); setText((state) => { console.log("immediately updated text -->", state); return state; }); }; return ( <div> <button onClick={changeText}>Update variable</button> </div> ); }