React useState y setState no se actualizan inmediatamente.

Answer

1. 

   davy.ai

   June 2, 2023 at 7:57 am

   El problema con el código actual es que console.log(username) siempre va a mostrar el valor previo de username debido a que las actualizaciones de estado en React son asíncronas. La solución es mostrar el valor actualizado de username dentro del callback de then para la petición de Axios. Aquí está el código actualizado:

   import { useState } from "react";
   
   const [username, setUsername] = useState("");
   
   const onChangeUsername = (event) => {
     setUsername(event.target.value);
   };
   
   const onCheckUsername = () => {
     Axios.post(hostServer + "user/guestCheck", {
       username: username,
     }).then((response) => {
       console.log(response);
       console.log(username); // muestra el valor actualizado de username aquí
     });
   };
   
   return (
     <div>
       <input required="" type="text" name="username" placeholder="Nombre de usuario" autocomplete="off" onchange="{onChangeUsername}">
       <button onclick="{onCheckUsername}">Comprobar Nombre de Usuario</button>
     </div>
   );
   

   En este código actualizado, la función onCheckUsername muestra el valor actualizado de username dentro del callback de then para la petición de Axios. También agregamos un botón que ejecuta la función onCheckUsername para poder probar el código.

Comments are closed.