Estoy tratando de familiarizarme con el gancho de React useState . En este momento no puedo actualizar el estado de mi objeto de errores, un poco inseguro de dónde me estoy equivocando. La idea aquí es almacenar los mensajes de error en un formulario de registro.
En este ejemplo, un usuario envía un nombre vacío, pero el objeto de error siempre permanece vacío. ¿Qué estoy haciendo mal?
export const SignUp = () => { const [errors, setErrors] = useState({}); const validateFirstName = () => { if (formData.firstName === undefined) { setErrors({...errors, firstName: 'First Name is required'}); console.log({errors}); // When condition is met errors is still an empty object } }; }Prueba con esto, agregué comentarios en el código.
export const SignUp = () => { const [errors, setErrors] = useState({}); console.log({errors}); // try with this const validateFirstName = () => { if (formData.firstName === undefined) { setErrors({...errors, firstName: 'First Name is required'}); console.log({errors}); // at this point, it is normal to have an empty errors, cause your component did not re-rendered yet } }; }Lo que estás haciendo es básicamente correcto. El estado aún no ha cambiado cuando llama a console.log(). Si desea hacer algo cuando cambia su estado, puede usar el gancho useEffect y pasar el estado como el segundo parámetro. Cuando use el estado de errores en su código jsx en algún lugar, funcionará como esperaría que funcionara.
export const SignUp = () => { const [errors, setErrors] = useState({}); useEffect(() => { console.log(errors); },[errors]) const validateFirstName = () => { if (formData.firstName === undefined) { setErrors({...errors, firstName: 'First Name is required'}); } }; }