react js form getting submitted twice-CodePudding

I have below code which calls save form

           <div className="col-md-4">
              <button onClick={saveCredit}  className="btn btn-success">
                Submit
            </button>

I have onclick handler function as

 const saveCredit = () =>{
     //validate form
     // call api to save form attributes
     CreditTransactionDataService.create(data)
    .then(response => {
      setSubmitted(true);
      console.log(response.data);
    })
    .catch(e => {
      console.log(e);
    });

 }

after successful save , I will show successful message as below.

{submitted ? (
        <div>
          <h4>You submitted successfully!</h4>
          <button className="btn btn-success mr-2" onClick={newCreditTransaction}>
            Add
          </button><Link style={{ fontWeight: 'bold' }} className="btn btn-warning" to={"/creditTransactionList"}>
            return to List
          </Link>
        </div>
      )

but the problem is, my form is getting submitted twice, and creating duplicate records with same values.... couple of save options, i restricted with unique key column at database level, but few tables still need to handled at code level..

CodePudding user response：

Your button doesn't need onClick event handler if it's responsible for submitting a certain form. You should add type="submit" to button and onSubmit to form tag itself.

You should go for this approach to handle submitting correctly (clicking of the button or hitting enter by the user are covered).

CodePudding user response：

I´m unable to reproduce it in codepen, but one solution a little bit hacky could be check in the method if it is submitted already

 const saveCredit = {
     //Check if it is submitted
     if(!submitted){
     //validate form
     // call api to save form attributes
     CreditTransactionDataService.create(data)
    .then(response => {
      setSubmitted(true);
      console.log(response.data);
    })
    .catch(e => {
      console.log(e);
    });
   }
 }

This may not be the best but could do the job

Also a thing I did notice is that your saveCredit function not look like a function.

Why not declare as an arrow function? Like:

const saveCredit = () => { //Your code }