React handleOnSubmit() 需要点击两次

Question

我有一个组件登录，我自己验证了表单。 如果表单没有错误，我需要点击两次按钮将表单值发送到后端。 我认为Object.keys(errorsValidateForm).length 有问题，因为没有正确更新。我做错了什么？

组件登录表单

import React, { useState, useContext, useEffect } from "react";
import { useLocation } from "wouter";
import logic from "../../logic";
import { AuthContext } from "../../context/AuthContext";
import validate from "./validateRulesLogin";
import "./index.css";

export default function Login(language) {
  const [, setAuth] = useContext(AuthContext);
  const [, pushLocation] = useLocation();
  const [messageError, setMessageError] = useState("");
  const [errorsValidateForm, setErrorsValidateForm] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [data, setData] = useState({ email: "", password: "" });

  const { lang } = language;

  useEffect(() => {}, [errorsValidateForm, isSubmitting]);

  async function handleOnSubmit(e) {
    e.preventDefault();
    setIsSubmitting(true);

    if (Object.keys(errorsValidateForm).length === 0 && isSubmitting) {
      const { email, password } = data;
      try {
        await logic.loginUser(email, password, lang);
        setAuth(true);
        setIsSubmitting(false);
        pushLocation("/");
      } catch (error) {
        setMessageError(error.message);
        setIsSubmitting(false);
        setTimeout(() => {
          setMessageError("");
        }, 3000);
      }
    } else {
      setErrorsValidateForm(validate(data, lang));
    }
  }
  const handleOnchangeData = (e) => {
    e.preventDefault();
    setData({
      ...data,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <>
      {messageError && (
        <div className="message">
          <p className="message-error">{messageError}</p>
        </div>
      )}
      <section className="hero is-fullwidth">
        <div className="hero-body">
          <div className="container">
            <div className="columns is-centered">
              <div className="column is-4">
                <form id="form" onSubmit={(e) => handleOnSubmit(e)} noValidate>
                  <div className="field">
                    <p className="control has-icons-left">
                      <input
                        className="input"
                        name="email"
                        type="email"
                        placeholder="Email"
                        autoComplete="email"
                        onChange={handleOnchangeData}
                        required
                      />
                      <span className="icon is-small is-left">
                        <i className="fas fa-envelope"></i>
                      </span>
                    </p>
                    {errorsValidateForm.email && (
                      <p className="help is-danger">
                        {errorsValidateForm.email}
                      </p>
                    )}
                  </div>
                  <div className="field">
                    <p className="control has-icons-left">
                      <input
                        className="input"
                        name="password"
                        type="password"
                        placeholder="Password"
                        autoComplete="password"
                        onChange={handleOnchangeData}
                        required
                      />
                      <span className="icon is-small is-left">
                        <i className="fas fa-lock"></i>
                      </span>
                    </p>
                    {errorsValidateForm.password && (
                      <p className="help is-danger">
                        {errorsValidateForm.password}
                      </p>
                    )}
                  </div>
                  <div className="field">
                    <p className="control">
                      <button type="submit" className="button is-success">
                        Login
                      </button>
                    </p>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Answer 1

我认为问题在于一两行的逻辑。试试改成这样：

async function handleOnSubmit(e) {
  e.preventDefault();
  if (!isSubmitting) {
    const errors = validate(data, lang);
    if (Object.keys(errors).length === 0) {
      setIsSubmitting(true);
      const { email, password } = data;
      try {
        await logic.loginUser(email, password, lang);
        setAuth(true);
        setIsSubmitting(false);
        pushLocation("/");
      } catch (error) {
        setMessageError(error.message);
        setIsSubmitting(false);
        setTimeout(() => {
          setMessageError("");
        }, 3000);
      }
    }
    setErrorsValidateForm(errors);
  }
}