我正在制作一个注册页面。我正在从React向Express发送数据，但是我必须点击两次Submit按钮才能发送数据。我不明白为什么会发生这样的事情。我尝试了fetch和axios方法，但是同样的事情发生了。我甚至制作了自己的自定义钩子并尝试了，但是仍然是一样的。下面是代码。
Login.js

import react, { useState } from "react";
import "./Login.css";
import useInput from "../Hooks/use-input";
import axios from "axios";

const Login = (props) => {
  const [data, setData] = useState([
    {
      fullname: undefined,
      email: undefined,
      password: undefined,
      dob: undefined,
      gender: undefined,
    },
  ]);

  const [enteredFullName, setenteredFullName] = useState("");
  const [enteredemail, setenteredemail] = useState("");
  const [enteredPassword, setenteredPassword] = useState("");
  const [enteredDob, setenteredDob] = useState("");
  const [enteredGender, setenteredGender] = useState("");
  const [isTocuhedFullName, setIsTouchedFullName] = useState(false);
  const [isTocuhedEmail, setIsTouchedEmail] = useState(false);
  const [isTocuhedPassword, setIsTouchedPassword] = useState(false);
  const [isTocuhedDob, setIsTouchedDob] = useState(false);
  const [isTocuhedGender, setIsTouchedGender] = useState(false);

  const fullNameChangeHandler = (event) => {
    setenteredFullName(event.target.value);
  };
  const emailChangeHandler = (event) => {
    setenteredemail(event.target.value);
  };
  const passwordChangeHandler = (event) => {
    setenteredPassword(event.target.value);
  };
  const dobChangeHandler = (event) => {
    setenteredDob(event.target.value);
  };
  const genderChangeHandler = (event) => {
    setenteredGender(event.target.value);
  };

  const fullNameBlurHandler = () => {
    setIsTouchedFullName(true);
  };
  const emailBlurHandler = () => {
    setIsTouchedEmail(true);
  };
  const passwordBlurHandler = () => {
    setIsTouchedPassword(true);
  };
  const dobBlurHandler = () => {
    setIsTouchedDob(true);
  };
  const genderBlurHandler = () => {
    setIsTouchedGender(true);
  };

  // const {
  //   value: enteredFullName,
  //   isValid: enteredFullNameIsValid,
  //   hasError: fullNameHasError,
  //   valueChangeHandler: fullNameChangeHandler,
  //   inputBlurHandler: fullNameBlurHandler,
  //   reset: fullNameReset,
  // } = useInput((value) => value.trim() !== "");

  // const {
  //   value: enteredemail,
  //   isValid: enteredemailIsValid,
  //   hasError: emailHasError,
  //   valueChangeHandler: emailChangeHandler,
  //   inputBlurHandler: emailBlurHandler,
  //   reset: emailReset,
  // } = useInput((value) => value.includes("@"));

  // const {
  //   value: enteredPassword,
  //   isValid: enteredPasswordIsValid,
  //   hasError: passwordHasError,
  //   valueChangeHandler: passwordChangeHandler,
  //   inputBlurHandler: passwordBlurHandler,
  //   reset: passwordReset,
  // } = useInput((value) => value.length >= 8);

  // const {
  //   value: enteredDob,
  //   isValid: enteredDobIsValid,
  //   hasError: dobHasError,
  //   valueChangeHandler: dobChangeHandler,
  //   inputBlurHandler: dobBlurHandler,
  //   reset: dobReset,
  // } = useInput((value) => value.trim() !== "");

  // const {
  //   value: enteredGender,
  //   isValid: enteredGenderIsValid,
  //   hasError: GenderHasError,
  //   valueChangeHandler: genderChangeHandler,
  //   inputBlurHandler: genderBlurHandler,
  //   reset: genderReset,
  // } = useInput((value) => value !== "None");

  // let formisValid = false;

  // formisValid =
  //   enteredFullNameIsValid &&
  //   enteredemailIsValid &&
  //   enteredPasswordIsValid &&
  //   enteredDobIsValid &&
  //   enteredGenderIsValid;

  const formSubmitHandler = async (e) => {
    e.preventDefault();
    let enteredFullNameIsValid;
    setData([
      {
        fullname: enteredFullName,
        email: enteredemail,
        password: enteredPassword,
        dob: enteredDob,
        gender: enteredGender,
      },
    ]);
    console.log(data);
    // setData(prev => ({
    //   ...prev, fullname: enteredFullName,
    // }))
    // console.log(data);
    // const res = await (
    //   await fetch("/register?data=" + JSON.stringify(data), {
    //     method: "POST",
    //   })
    // ).json();

    // const res = await axios
    //   .post("/register?data=" + JSON.stringify(data))
    //   .then((res) => res.data)
    //   .catch((err) => err.response.data);

    // fullNameReset();
    // emailReset();
    // passwordReset();
    // dobReset();
    // genderReset();

    setenteredFullName("");
    setenteredPassword("");
  };

  return (
    <form className="container" onSubmit={formSubmitHandler}>
      <div className="heading">Register Page</div>
      <div className="details">
        <div>
          <label htmlFor="name">Full Name</label>
          <input
            type="text"
            placeholder="Full Name"
            value={enteredFullName}
            onChange={fullNameChangeHandler}
            onBlur={fullNameBlurHandler}
          ></input>
        </div>
        <div>
          <label>E-mail</label>
          <input
            type="email"
            value={enteredemail}
            onChange={emailChangeHandler}
            onBlur={emailBlurHandler}
            placeholder="E-mail"
            id="email"
          ></input>
        </div>
        <div>
          <label>Password</label>
          <input
            type="password"
            value={enteredPassword}
            onChange={passwordChangeHandler}
            onBlur={passwordBlurHandler}
            placeholder="Password"
          ></input>
        </div>
        <div>
          <label>Date of Birth</label>
          <input
            value={enteredDob}
            onChange={dobChangeHandler}
            onBlur={dobBlurHandler}
            type="date"
          ></input>
        </div>
        <div>
          <label>Gender</label>
          <select
            value={enteredGender}
            onChange={genderChangeHandler}
            onBlur={genderBlurHandler}
          >
            <option value="none">None</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">other</option>
          </select>
        </div>
        <div>
          <button>Submit</button>
        </div>
      </div>
    </form>
  );
};

export default Login;