Considere el siguiente escenario:
const ExampleComponent = () => { const [status, setStatus] = useState(500) //Calling this function with a click event const submitHandler = () => { const url = 'localhost:8000/foo' fetch(url) .then((res) => { setStatus(res.status) return res.json() }) .then((res) => { if (status === 200) { console.log("OK") } else { console.log("Something went wrong") } }) } } En este caso, dado que React pone en cola la tarea setStatus, en el momento en que realizo la verificación de status === 200 , el estado no se ha actualizado. Entonces, ¿cómo trabajamos en estos escenarios?
Por supuesto que se imprimirá ("Algo salió mal"). Porque su componente aún no está actualizado. Para comprobar tu respuesta. ejecute este código y mire su consola para obtener más información:
import React, { useState } from 'react'; const App = () => { const [status, setStatus] = useState(500); const submitHandler = () => { const url = 'https://www.irdevprogs.ir/api/tsetmc/companies' fetch(url) .then((res) => { setStatus(res.status) return res.json() }) .then((res) => { console.log(status) if (status === 200) { console.log("OK") } else { console.log("Something went wrong") } }) } return ( <div> <button onClick={submitHandler}>first</button> <button onClick={()=> console.log(status)}>second</button> </div> ); }; export default App;Pero, ¿cuál es la solución? La rutina estándar de la biblioteca React dice que no puede configurar el estado y usar el estado actualizado simultáneamente. Debe usar useEffect hook para manejar esto. Y agregue el estado a la matriz de dependencias para manejar este caso. algo como esto :
useEffect(() => { if (status === 200) { console.log("OK") } else { console.log("Something went wrong") } }, [status])