javascript - 表单提交时在 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>
      )}
    </>
  );
}