背景信息：

因此，我正在进行一个项目，其中包括将表单数据发送到数据库。目前，我只是在. NET中设置数据库之前使用Mock API来启动和运行所有内容。

自定义挂钩和验证器信息：

我使用的是一个自定义钩子，它有两个主要功能：**handleChange（）**负责在主组件CreateUser上设置新值，**handleSubmit（）**调用我的自定义验证器（validateNewUser）检查表单中的错误。
我的钩子和验证器工作正常，但Axios post请求有问题。我可以将Axios post请求放在我的自定义钩子中，它按预期工作，但我不知道如何仅在正确填写表单时才将表单发送到Mock API。

到目前为止的试验和错误：

我曾尝试在handlePost函数中使用if语句（我认为这是正确的方法，我可能只是遗漏了一些东西，我可能是错的），我尝试将Axios请求放在handlePost函数中，但没有取得任何进展。
我目前设置的方式是有效的，但基本上只要您单击提交，它就会将数据发送到API，很可能是因为它每次都提交表单。另一种方法可能是设置用户填写表单时弹出错误，以便表单在提交之前就准确无误。
我是React的新手，如果我的问题令人困惑，我向你道歉。如果需要更多信息，我会尽我所能提供。
所有涉及的部分的代码将在下面，任何和所有的输入是非常感谢。

主代码：

使用创建用户.jsx：

import { useState } from 'react';
import axios from 'axios';

const useCreateUser = (validateNewUser) => {
    const [values, setValues] = useState({
        firstName: '',
        lastName: '',
        email: '',
        password: ''
    });

    const [errors, setErrors] = useState({});

    const handleChange = e => {
        const {name, value} = e.target
        setValues({
            ...values,
            [name]: value
        });
    };

    const handleSubmit = e => {
    e.preventDefault();
    setErrors(validateNewUser(values));

    const user = {
        firstName: values.firstName,
        lastName: values.lastName,
        email: values.email,
        password: values.password
        };

    if (handleSubmit){
        axios.post(url, user)
        .then((response) => {
        console.log(response.data);
    })
    }
}

  return {handleChange, values, handleSubmit, errors}
}

export default useCreateUser;

验证新用户.jsx：

export default function validateNewUser(values) {
    let errors = {}

    //Validate First Name
    if(!values.firstName.trim()) {
        errors.firstName = 'First Name is Required.'
    }

    //Validate Last Name
    if(!values.lastName.trim()) {
        errors.lastName = 'Last Name is Required.'
    }

    //Validate Email
    if(!values.email){
        errors.email = 'Email is Required.'
    } else if(!/\S+@\S+\.\S+/.test(values.email)) {
        errors.email = 'Invalid Email Address.'
    }

    if(!values.password){
        errors.password = 'Password is Required.'
    } else if(values.password.length < 6) {
        errors.password = 'Password must be greater than 6 characters.'
    }

    return errors;

}

创建用户.jsx：

import Header from "../Header";
import { Form, Button } from "semantic-ui-react";
import { Box } from "@mui/material";
import useCreateUser from "../../hooks/useCreateUser";
import validateNewUser from "../../validators/validateNewUser";

const CreateUser = () => {
    const {handleChange, values, handleSubmit, errors} = useCreateUser(validateNewUser);
    
    return (
    <Box m="20px">
        <Box 
        display="flex" 
        justifyContent="space-between" 
        alignItems="center"
        margin="0 auto"
        marginBottom="20px"
        >
            <Header title="Create a New User" subtitle="Please ensure to select the correct role."/>
        </Box>

        <Form onSubmit={handleSubmit}>
            <Form.Field>
                <label>First Name</label>
                <input placeholder='First Name' name='firstName' type='text' value={values.firstName} onChange={handleChange} />
                {errors.firstName && <p style={{color: "red"}}>{errors.firstName}</p>}
            </Form.Field>
            <Form.Field>
                <label>Last Name</label>
                <input placeholder='Last Name' name='lastName' type='text' value={values.lastName}  onChange={handleChange} />
                {errors.lastName && <p style={{color: "red"}}>{errors.lastName}</p>}
            </Form.Field>
            <Form.Field>
                <label>Email</label>
                <input placeholder='Email' name='email' type='email' value={values.email} onChange={handleChange} />
                {errors.email && <p style={{color: "red"}}>{errors.email}</p>}
            </Form.Field>
            <Form.Field>
                <label>Password</label>
                <input placeholder='Password' name='password' type='password' value={values.password} onChange={handleChange} />
                {errors.password && <p style={{color: "red"}}>{errors.password}</p>}
            </Form.Field>
            <Button type='submit'}>Submit</Button>
        </Form>
    </Box>
    )

}

export default CreateUser;