0

Hola estoy haciendo un formulario de registro per por alguna razon no me agarra los valores de los textos porque me sale un error de que debe completar los campos cuando ya estan con datos. Pruebo por el postman y por ahi si me registra perfectamente, tengo es el problema en el formulario.

export const Register = () => {

    const [nombre, setNombre] = useState('');
    const [apellido, setApellido] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [genero, setGenero] = useState('');

    const generos = [
        "Femenino",
        "Masculino",
        "Otro"
    ]
    
    const navigate = useNavigate();
    const alert = useAlert();
    const dispatch = useDispatch();
    const { isAuthenticated, error, loading } = useSelector(state => state.auth)

    useEffect(() => {
        if (isAuthenticated) {
            navigate("/home")
        }
        if (error) {
            dispatch(clearErrors)
        }
    }, [dispatch, isAuthenticated, error, alert])

    const submitHandler = (e) => {
        e.preventDefault();

        const formData = new FormData();
        formData.set('nombre', nombre);
        formData.set('apellido', apellido);
        formData.set('email', email);
        formData.set('password', password);
        formData.set('genero', genero);

        dispatch(register(formData))
    }

    return (
        <Fragment>
            {loading ? <div className='d-flex justify-content-center align-items-center m-5'>
                <h2 className='quantify text-white'> Loading...</h2>
            </div> : (
                <Fragment>
                    <MetaData title="Register"></MetaData>
                    <div className='backgroundRegister'>
                        <div className='container container-fluid'>
                            <div className="row d-flex justify-content-center">
                                <div className='col-8'>
                                    <div className="card rounded-3 m-1 text-black">
                                        <img src={registerfondo} className="card-img-top cardRegister bd-placeholder-img text-white" aria-label='Placeholder: Register' alt='international'></img>
                                        <div class="card-body p-md-5 mx-md-4">
                                            <h2 className="card-title modern text-center">Registro</h2>
                                            <form onSubmit={submitHandler} encType='multipart/form-data'>
                                                <div className='form-group mb-4'>
                                                    <label className="form-label" htmlFor='name_field'>Nombre</label>
                                                    <input type="text" id="name_field" className="form-control"
                                                        value={nombre} onChange={(e) => setNombre(e.target.value)} />
                                                </div>
                                                <div className='form-group mb-4'>
                                                    <label className="form-label" htmlFor='lastName_field'>Apellido</label>
                                                    <input type="text" id="lastName_field" className="form-control"
                                                        value={apellido} onChange={(e) => setApellido(e.target.value)} />
                                                </div>
                                                <div className='form-group mb-4'>
                                                    <label className="form-label" htmlFor='email_field'>Email</label>
                                                    <input type="text" id="email_field" className="form-control"
                                                        value={email} onChange={(e) => setEmail(e.target.value)} />
                                                </div>
                                                <div className='form-group mb-4'>
                                                    <label className="form-label" htmlFor='password_field'>Clave</label>
                                                    <input type="password" id="password_field" className="form-control"
                                                        value={password} onChange={(e) => setPassword(e.target.value)} />
                                                </div>
                                                <div className='form-group mb-4'>
                                                    <label className="form-label" htmlFor='genero_field'>Genero</label>
                                                    <select id='genero_field' className='form-control'
                                                        value={genero} onChange={(e) => setGenero(e.target.value)} >
                                                        {generos.map(genero => (
                                                            <option key={genero} value={genero}>{genero} </option>
                                                        ))}
                                                    </select>
                                                </div>
                                                <div class="text-center pt-1 mb-5 pb-1">
                                                    <button class=" w-100 btn btn-primary btn-block fa-lg backgroundMega border border-dark mb-3" id='register_button' type="submit">Registrarme </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Fragment>
            )}
        </Fragment>
    )
}

el error me sale al darle submit, en redux me sale los errores de fallido probe tambien con otra manera pero ninguna me funciona, les agradeceria mucho la ayuda:

type(pin):"REGISTER_USER_FAIL" payload(pin):"ValidationError: auth validation failed: nombre: Por favor ingrese el nombre, apellido: Por favor ingrese el apellido, email: por favor ingrese el correo electronico, password: Por favor registre una contraseña, genero: Por favor favor seleccione su genero at model.Document.invalidate (C:\Users\miche\OneDrive\Escritorio\apiWeb-InternationalDrivingSchool\node_modules\mongoose\lib\document.js:3123:32) at C:\Users\miche\OneDrive\Escritorio\apiWeb-InternationalDrivingSchool\node_modules\mongoose\lib\document.js:2911:17 at C:\Users\miche\OneDrive\Escritorio\apiWeb-InternationalDrivingSchool\node_modules\mongoose\lib\schematype.js:1349:9 at processTicksAndRejections (node:internal/process/task_queues:78:11)"

1
  • Intenta pasar por ejemplo formData.set('nombre', e.target.elements.name_field.value); en vez de pasar el estado nombre y fíjate si pasa, esta complicado depurar ya que usas redux y FormData, si tuvieras un codesandbox, ya que puede ser un problema de redux también, quedo al pendiente...
    – g.4
    el 28 ene. a las 2:34

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.