1

Estoy haciendo un formulario de registro y login con react, y resulta que a la hora de llenar el form y enviar los datos, el servidor me responde con que falta llenar los campos. Yo puse en el servidor de express que en caso de que se envíen campos vacíos se responda así, pero lleno los campos en el formulario y de igual manera me envía este error.

import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import axios from 'axios';

export default function Register(){

    const [datos, setDatos] = useState({
        nombre: '',
        contraseña: ''
    });

    const [mensaje, setMensaje] = useState();
    const [loading, setLoading] = useState(false);
 
    const { nombre, contraseña } = datos;

    const HandleChange = (e) => {
        setDatos({ ...datos, [e.target.name]: e.target.value })
    }

    const onSubmit = async (e) => {
        e.preventDefault()
        if(nombre !== '' && contraseña !== '') {
            const Usuario = {
                nombre, 
                contraseña
            };
            //setLoading(true)
            await axios
            .post('http://localhost:4000/register', Usuario)
            .then(({data}) => console.log(data))
        }
    }

    const navigate = useNavigate();

    return(
        <div > 
            <h2>Bienvenido a Multiventas</h2>
            <h3>Registrese para continuar</h3>
            <form onSubmit={(e) => onSubmit(e)}>
                <div>
                    <label htmlFor="nombre">Nombre</label>
                    <input 
                    onChange={(e) => HandleChange(e)}
                    type="text" 
                    id='nombre' 
                    name='nombre' 
                    placeholder='Ejm: Juan' 
                    autoComplete="off"
                    />
                </div>

                <div>
                    <label htmlFor="contraseña">Contraseña</label>
                    <input 
                    onChange={(e) => HandleChange(e)}
                    type="password" 
                    id='contraseña' 
                    name='contraseña'  
                    autoComplete="off"
                    />
                </div>

                <button type="submit"> Registrarme </button>
                <p>
                    ¿Ya tienes cuenta?
                    <b onClick={() => navigate('/login')} style={{cursor: 'pointer'}} >Iniciar Sesion</b>
                </p>

            </form>
        </div>
    )
};
1
  • Tu formulario está bien hecho, y se mandan bien los datos a la función onSubmit, tu problema debe estar en el servidor de Express, revisa bien la lógica de esa condicional que agregaste Commented el 9 sept. 2022 a las 21:30

1 respuesta 1

0

El formulario esta enviando los datos, creo que el fallo lo tienes en la recepción de los mismos en el lado backend.

  1. Comprueba que estes capturando bien el body en el backend.
  2. Comprueba que este bien configurado el endpoint.
  3. Te he refactorizado el formulario, eliminando algo de código redundante para que le eches un vistazo.

Un saludo

import { useNavigate } from "react-router-dom";
import { useState } from "react";
import axios from "axios";

export default function Form() {
  const navigate = useNavigate();
  const [datos, setDatos] = useState({
    nombre: "",
    contraseña: ""
  });
  const [mensaje, setMensaje] = useState();
  const [loading, setLoading] = useState(false);

  const handleChange = (e) => {
    setDatos({
      ...datos,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const { nombre, contraseña } = datos;
      if (nombre.length <= 0 || contraseña.length <= 0) {
        throw new Error("Los campos son requeridos.");
      }
      await axios
        .post("http://localhost:4000", datos)
        .then(({ data }) => console.log(data));
      setLoading(false)
    } catch (error) {
      console.log(error);
      setLoading(false)
      // Aqui puedes setear tu mensaje => setMessage(error.message)
    }
  };

  return (
    <div>
      <h2>Bienvenido a Multiventas</h2>
      <h3>Registrese para continuar</h3>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="nombre">Nombre</label>
          <input
            onChange={(e) => handleChange(e)}
            value={datos.nombre}
            type="text"
            id="nombre"
            name="nombre"
            placeholder="Ejm: Juan"
            autoComplete="off"
            required
          />
        </div>

        <div>
          <label htmlFor="contraseña">Contraseña</label>
          <input
            onChange={(e) => handleChange(e)}
            value={datos.contraseña}
            type="password"
            id="contraseña"
            name="contraseña"
            autoComplete="off"
            required
          />
        </div>

        <button type="submit"> Registrarme </button>
        <p>
          ¿Ya tienes cuenta?
          <b onClick={() => navigate("/login")} style={{ cursor: "pointer" }}>
            Iniciar Sesion
          </b>
        </p>
      </form>
    </div>
  );
}

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.