我正在尝试通过 MaterialUI 项目中的 useFormik 挂钩使用 Formik。 “onSubmit”功能似乎在控制台日志检查的基础上运行良好，但 POST 请求似乎没有通过，因为数据库 - MySQL 中没有更新任何新条目。根据邮递员的回复，后端 API 端点似乎很好。请帮助确定问题
import React, { useEffect } from 'react';
import { Box, Card, Container, Grid, Typography } from '@mui/material';
import Button from '@mui/material/Button';
import Paper from '@mui/material/Paper';
import { NavLink } from 'react-router-dom';
import PageTitle from '../pageTitle/PageTitle';
import TextField from '@mui/material/TextField';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { FormControl } from '@mui/material';
import { useFormik } from 'formik';
import * as yup from 'yup';
import axios from 'axios';
// import { Navigate } from 'react-router-dom';
const validationSchema = yup.object({
agencyName: yup
.string()
.min(8, 'Must be at least 8 characters')
.max(20, 'Must be less than 20 characters')
.required('Username is required')
.matches(/^[a-zA-Z0-9]+$/, 'Cannot contain special characters or spaces'),
phoneNumber: yup.string().required('Required'),
// .matches(/^[0-9]*$/, 'Phone number is not valid')
email: yup
.string('Enter your email')
.email('Enter a valid email')
.required('Email is required'),
streetAddress: yup.string().required('Required'),
zipCode: yup.string().required('Required'),
state: yup.string().required('Required'),
country: yup.string().required('Required'),
});
const AddHRAgency = () => {
// const navigate = Navigate();
const formik = useFormik({
initialValues: {
name: '',
phone: '',
email: '',
unit_street_address: '',
city_address: '',
zip_code: '',
state: '',
country: '',
},
// validationSchema: validationSchema,
onSubmit: async (values, props) => {
console.log('The Process Starts');
try {
console.log('step1');
const userVal = JSON.stringify(values, null, 2);
console.log(userVal);
await axios.post('http://localhost:8800/AddHRAgencies', userVal, {
'content-type': 'application/json',
});
console.log('step3');
props.resetForm();
props.setSubmitting(false);
} catch (error) {
console.log(`Error OCCURRED:: ${error}`);
}
console.log('The Process Ends');
},
});
return (
<React.Fragment>
<Box
sx={{
margin: '1rem',
padding: '1rem',
background:
'linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(194,203,217,1) 76%)',
}}
>
<Paper
sx={{
width: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around',
alignItems: 'center',
height: '100%',
background:
'linear-gradient(4deg, rgba(255,255,255,1) 0%, rgba(214,221,232,1) 81%)',
}}
variant='outlined'
>
<Box
sx={{
display: 'flex',
alignItems: 'space-evenly',
justifyContent: 'space-evenly',
flexWrap: 'wrap',
gap: '1.5rem',
marginTop: '1rem',
// position: 'relative',
}}
>
<PageTitle>
<Typography variant='h3' sx={{}}>
Add a New HR Agency Record
</Typography>
</PageTitle>
<form
// component='form'
onSubmit={formik.handleSubmit}
sx={{
// '& .MuiTextField-root': { m: 1, width: '25ch' },
margin: '1rem 0',
width: '80%',
}}
>
{/* <FormControl
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
> */}
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
required
id='outlined-basic'
label='Name'
variant='outlined'
margin='normal'
fullWidth
type='text'
name='name'
value={formik.values.name}
onChange={formik.handleChange}
error={formik.touched.name && Boolean(formik.errors.name)}
helperText={formik.touched.name && formik.errors.name}
/>
</Grid>
<Grid item xs={12}>
<TextField
required
id='outlined-basic'
label='Agency Phone'
variant='outlined'
margin='normal'
fullWidth
type='text'
name='phone'
value={formik.values.phone}
onChange={formik.handleChange}
error={formik.touched.phone && Boolean(formik.errors.phone)}
helperText={formik.touched.phone && formik.errors.phone}
/>
</Grid>
<Grid item xs={12}>
<TextField
required
id='outlined-basic'
label='Agency Email'
variant='outlined'
margin='normal'
fullWidth
type='email'
name='email'
value={formik.values.email}
onChange={formik.handleChange}
error={formik.touched.email && Boolean(formik.errors.email)}
helperText={formik.touched.email && formik.errors.email}
/>
</Grid>
<Grid item xs={12}>
<TextField
id='outlined-basic'
label='Unit Address'
variant='outlined'
margin='normal'
fullWidth
required
type='text'
name='unit_street_address'
value={formik.values.unit_street_address}
onChange={formik.handleChange}
error={
formik.touched.unit_street_address &&
Boolean(formik.errors.unit_street_address)
}
helperText={
formik.touched.unit_street_address &&
formik.errors.unit_street_address
}
/>
</Grid>
<Grid item xs={12}>
<TextField
id='outlined-basic'
label='Street Address'
variant='outlined'
margin='normal'
fullWidth
required
type='text'
name='city_address'
value={formik.values.city_address}
onChange={formik.handleChange}
error={
formik.touched.city_address &&
Boolean(formik.errors.city_address)
}
helperText={
formik.touched.city_address && formik.errors.city_address
}
/>
</Grid>
<Grid item xs={12}>
<TextField
required
id='outlined-basic'
label='Zip code'
variant='outlined'
margin='normal'
fullWidth
type='text'
name='zip_code'
value={formik.values.zip_code}
onChange={formik.handleChange}
error={
formik.touched.zip_code && Boolean(formik.errors.zip_code)
}
helperText={
formik.touched.zip_code && formik.errors.zip_code
}
/>
</Grid>
<Grid item xs={12}>
<TextField
id='outlined-basic'
label='State'
variant='outlined'
margin='normal'
fullWidth
required
type='text'
name='state'
value={formik.values.state}
onChange={formik.handleChange}
error={formik.touched.state && Boolean(formik.errors.state)}
helperText={formik.touched.state && formik.errors.state}
/>
</Grid>
<Grid item xs={12}>
<TextField
id='outlined-basic'
label='Country'
variant='outlined'
margin='normal'
fullWidth
required
type='text'
name='country'
value={formik.values.country}
onChange={formik.handleChange}
error={
formik.touched.country && Boolean(formik.errors.country)
}
helperText={formik.touched.country && formik.errors.country}
/>
</Grid>
</Grid>
<Button
sx={{
marginTop: '2rem;',
width: '25%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
variant='contained'
type='submit'
>
Submit
</Button>
{/* </FormControl> */}
</form>
{/* </form> */}
<Button
variant='contained'
component={NavLink}
to='/hragencies'
sx={{
// marginTop: '2rem;',
width: '20%',
minWidth: '180px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: '0.5rem 1.5rem',
marginBottom: '1.5rem',
}}
>
<ArrowBackIcon sx={{ marginRight: '1rem' }} /> HR Agency
</Button>
</Box>
</Paper>
</Box>
</React.Fragment>
);
};
export default AddHRAgency;