Question

0

168

Visualizações

Form data is sent twice in react

I'm doing a form in react. I created a function using useState, to catch the data of my inputs, then another function for my form. But it turns out that when I click on my button on my form, the data is sent double, what can I do?

The function of my form is like this

const handleSubmit = (evt)=>{
    evt.preventDefault();
    let respond = FormValidation(inputValues);
    if (respond.message) {
      setError(respond)
    }else{
      auth.signUp(inputValues);
    }
  }

auth is the object of my useContext, the function signUp is like this.

const signUp = (author) =>{
        setLoading(true)
        const {usuario, email, contraseña} = author
        const obj_author = {
            nombre : usuario,
            email : email,
            contrasenna : contraseña
        }
        console.log(obj_author); //Here the console shows me the data twice
        axios.post(API_ROUTE, obj_author,{
            method : 'POST',
            headers : {
                "Content-type":'application/json'
            }
        }).then((res)=>{
            setLoading(false)
            setAuth(obj_author)
            setIsLogin(true)
            console.log(res.data);
        }).catch((err)=>{
            setLoading(false)
            setError(err)
        })
    }

The function of my inputs is this

const handleChange = (evt)=>{
    evt.preventDefault();
    const input = evt.target
    const value = input.type === 'checkbox' ? input.checked : input.value
    setInputValues({
      ...inputValues,
      [input.name] : value
    })
  };

Example

about 4 years ago · Juan Pablo Isaza

Responde à pergunta

0

168

Form data is sent twice in react

Encontrar trabalhos remotos

Andres GPT