問題：React 聯系表單在每次提交后每次 API 調用都會增加 n +1 次，並且在第一次點擊后不提交

Question

我正在使用 Firebase Firestore 作為表單輸入數據的數據庫，為我的投資組合 Web 應用程序構建一個聯系表單。

第一個問題：當我單擊提交按鈕時，它不會在第一次嘗試時執行 API 調用以將輸入數據寫入數據庫，但在第一次嘗試之后每次都有效。

第二個問題：第一次初始提交后的每個表單提交都會將 API 調用增加 n + 1。

（例如我第二次嘗試提交表單輸入數據在數據庫中記錄了兩次。第三次我嘗試提交表單時，數據庫中的數據記錄了三次相同的輸入......等等.)

我對 React 和 JS 還很陌生，所以在此先感謝！

import React from "react";
import './contact.css';
import { initializeApp } from "firebase/app";
import {
getFirestore, collection, getDocs, addDoc
} from 'firebase/firestore';


const firebaseConfig = {
apiKey: "xxxxxx",
authDomain: "xxxxxx",
projectId: "xxxxxx",
storageBucket: "xxxxxx",
messagingSenderId: "xxxxxx",
appId: "xxxxxx"
};

// Initializing the Firebase Firestore database
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const colRef = collection(db, 'contacts')

// Read the existing documents from the database and console.log them
const findDocs = () => {
getDocs(colRef)
  .then((snapshot) => {
    let contacts = []
    snapshot.docs.forEach((doc) => {
      contacts.push({ ...doc.data(), id: doc.id })
    })
    console.log(contacts)
  })
  .catch(err => {
    console.log(err.message)
  })
}

// Handling the contact form submission 
const handleSubmit = (e) => {
findDocs();
e.preventDefault();

const addContactForm = document.querySelector('.add');

addContactForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  await addDoc(colRef, {
    name: addContactForm.name.value,
    email: addContactForm.email.value,
    message: addContactForm.message.value,
  })
    .then( () => {
      addContactForm.reset();
      console.log('Form submitted');
    })
})
}

function Contact() {

return (
    <form onSubmit={handleSubmit} className="add" >
      <h1 className="contact-form-h1" >Contact Me</h1>
      <h5 className="replying-shortly">I will be replying shortly!</h5>

      <label className="form-headings" htmlFor="name">Name</label>
      <input type="text" name='name' placeholder="Name" required />

      <label className="form-headings" >Email</label>
      <input placeholder="Email" type="text" name='email' required />

      <label className="form-headings" >Message</label>
      <textarea placeholder="Message" type="text"
        name='message' required>
      </textarea>

      <button type="submit">Submit</button>
    </form>
);
};

export default Contact;

Answer 1

在@CarlosSpohr 的幫助下，我意識到我添加了兩次提交事件，從而解決了我的問題。

一個來自“onSubmit”表單屬性，第二個來自“.addEventListener”方法。 刪除它后，我的表單現在在第一次嘗試時提交，並且不會多次將相同的數據寫入數據庫。

// Handling the contact post submission 
const handleSubmit = (e) => {
  e.preventDefault();
  findDocs();

  // Writing input data to database
  const addContactForm = document.querySelector('.add');
  e.preventDefault();
  addDoc(colRef, {
    name: addContactForm.name.value,
    email: addContactForm.email.value,
    message: addContactForm.message.value,
  })
    .then(  () => {
       addContactForm.reset();
      console.log('Form submitted');
    })
    alert("Message submitted! Someone will be contacting you back shortly.")
}