提交表單時在 React JS 中顯示成功或錯誤消息

Question

我試圖在提交表單時顯示錯誤或成功消息，具體取決於它是否有效。 我最初只是使用“警報”，但該項目要求將消息顯示在表單下方。 我在 Gulp 中收到“未定義成功和錯誤”的錯誤。 但它只提到了未定義的大括號（在代碼中）內的成功和錯誤。 我試着用谷歌搜索這個並在這里檢查類似的問題，但沒有發現任何問題。 到目前為止，這是我的代碼：

import React, { useState } from "react";
import { ReactComponent as Decoration } from "../assets/Decoration.svg";
import Instagram from "../assets/Instagram.svg";
import Facebook from "../assets/Facebook.svg";
import { db } from "../firebase";

function Kontakt() {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [msg, setMsg] = useState("");

    const handleSubmit = (e) => {
        const success = '';
        const error = '';

        e.preventDefault();

        db.collection('contacts').add({
            name: name,
            email: email,
            msg: msg
        })
            .then(() => {
                return success;
            })
            .catch(() => {
                return error;
            });

        setName("");
        setEmail("");
        setMsg("");
    }

    return (
        <div id="contact" className="contact-container">
            <div className="contact-box">
                <p>Skontaktuj się z nami</p>
                <Decoration />
                <form className="contact-form" onSubmit={handleSubmit}>
                    <div className="contact-form__labels">
                        <label>
                            <p>Wpisz swoje imię</p>
                            <input name="name" required placeholder="Ania/Krzysztof" className="contact-name" value={name} onChange={(e) => setName(e.target.value)} />
                        </label>
                        <label>
                            <p>Wpisz swój email</p>
                            <input type="email" required placeholder="abc@xyz" className="contact-email" value={email} onChange={(e) => setEmail(e.target.value)} />
                        </label>
                    </div>

                    <label className="contact-text-label">
                        <p>Wpisz swoją wiadomość</p>
                        <textarea
                            placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                            className="contact-message" minlength="120" value={msg} required onChange={(e) => setMsg(e.target.value)}>
                        </textarea>
                    </label>
                    {success && <p>"Twoja wiadomość została wysłana."</p>}
                    {error && <p>"Wysyłanie wiadomości nie powdioło się.  Spróbuj jeszcze raz."</p>}
                    <button type="submit" className="contact-btn">Wyślij</button>
                </form>
            </div>
            <div className="footer-container">

            </div>
            <p id="footer">Copyright by Coders Lab</p>
            <a href="https://facebook.com">
                <img id="fb" src={Facebook} alt="Facebook" />
            </a>
            <a href="https://instagram.com">
                <img id="insta" src={Instagram} alt="Instagram" />
            </a>

        </div>

    )
}


export default Kontakt; 

我得到的錯誤是：

src\components\Kontakt.js
  Line 59:7:  'success' is not defined  no-undef
  Line 60:7:  'error' is not defined    no-undef

我錯過了什么？

Answer 1

此處引發編譯的主要問題是success和error常量的范圍在handleSubmit閉包內。 您正試圖在此閉包之外訪問它們，這就是它們未定義的原因。

另一個問題是這個想法是錯誤的。 您已經定義了兩個具有相同值的常量，出於某種原因，您從db.collection().add promise 回調中返回它們，這些回調在任何地方都沒有使用。

function Kontakt() {
  const [status, setStatus] = useState(undefined);

  const handleSubmit = (e) => {
    db.collection('contacts')
      .add({
        name: name,
        email: email,
        msg: msg,
      })
      .then(() => {
        setStatus({ type: 'success' });
      })
      .catch((error) => {
        setStatus({ type: 'error', error });
      });
  };

  return (
    <>
      {status?.type === 'success' && <p>"Twoja wiadomość została wysłana."</p>}
      {status?.type === 'error' && (
        <p>"Wysyłanie wiadomości nie powdioło się. Spróbuj jeszcze raz."</p>
      )}
    </>
  );
}