無法通過聯系表將數據提交至 firebase

Question

import React, { useState } from 'react'
        import styled from 'styled-components'
        import Title from '../Components/Title'
        import { InnerLayout, MainLayout } from '../Styles/Layout'
        import Button from '../Components/Button'
        import { db } from '../firebase';
        
        function Contact() {
            const [name, setName] = useState("");
            const [email, setEmail] = useState("");
            const [message, setMessage] = useState("");
            const [subject, setSubject] = useState("");
        
            const handleSubmit = (e) => {
                e.preventDefault();
        
                db.collection('mail').add({
                    name: name,
                    email: email,
                    subject: subject,
                    message: message,
                })
                    .then(() => {
                        alert("Thank you for contacting. Your message has been sent successfully.");
                    })
                    .catch((err) => {
                        alert(err.message);
                    });
        
                setName('')
                setEmail('')
                setSubject('')
                setMessage('')
            };
        
            return (
                <MainLayout>
                    <Title title={'Contact'} span={'Contact'} />
                    <ContactMain>
                        <InnerLayout className='contact-section'>
                            <div className="left-content">
                                <div className="contact-title">
                                    <h4>Get In Touch</h4>
                                </div>
                                <form className="form" onSubmit={handleSubmit}>
                                    <div className="form-field">
                                        <label htmlFor="name">Enter Your Name</label>
                                        <input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} />
                                    </div>
                                    <div className="form-field">
                                        <label htmlFor="email">Enter Your Email</label>
                                        <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} />
                                    </div>
                                    <div className="form-field">
                                        <label htmlFor="subject">Enter Your Subject</label>
                                        <input type="text" id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} />
                                    </div>
                                    <div className="form-field">
                                        <label htmlFor="text-area">Enter Your Message</label>
                                        <textarea name="textarea" id="textarea" cols="30" rows="10" value={message} onChange={(e) => setMessage(e.target.value)}></textarea>
                                    </div>
                                    <div className="form-field f-button">
                                        <Button title="Send Email" />
                                    </div>
                                </form>
                            </div>
                        </InnerLayout>
                    </ContactMain>
                </MainLayout>
        
            )
    }

我不知道為什么，但我無法將詳細信息發送到我的 firebase 數據庫。 我無法在此代碼中找到問題。 我復制了 firebase 數據庫密鑰和 firebase.js 中的所有內容，然后將其導入到此 contact.js 中，然后我對此進行了必要的更改。 盡管如此，我還是無法弄清楚這個問題。

Answer 1

一旦add()返回的承諾得到解決，我將重置表單。

const handleSubmit = (e) => {
  e.preventDefault();
    
  db.collection('mail').add({
    name: name,
    email: email,
    subject: subject,
    message: message,
  }).then(() => {
    // Reset those states here
    setName('')
    setEmail('')
    setSubject('')
    setMessage('')
    alert("Thank you for contacting. Your message has been sent successfully.");
  }).catch((err) => {
    alert(err.message);
  });
};

我猜您的狀態在添加文檔之前被重置為"" ，因為這些setState方法會在添加文檔之前運行。

Answer 2

可能是因為按鈕組件類型中的按鈕 html 未設置為“提交”-我遇到了同樣的問題，我認為最終變得非常簡單。