问& Material :错误未定义

EN

import React from 'react';
import Grid from '@mui/material/Grid';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { useForm, Controller } from 'react-hook-form';
import backEndApi from '../api/backEndApi';

const UserForm = function () {

  const { control, handleSubmit, formState: { errors }, getValues } = useForm();

  const onFormSubmit = (event) => {
    event.preventDefault();
    backEndApi.post(getValues());
  };

  return (
    <Grid container alignItems="center" justify="center" direction="column" paddingTop="10%">
      <form onSubmit={handleSubmit(onFormSubmit)}>
        <Grid container alignItems="center" justify="center" direction="column" spacing={5}>
          <Grid item>
            <Controller
              name="title"
              control={control}
              rules={{ required: true }}
              render={({ field }) => {
                return (
                  <TextField
                    {...field}
                    id="title"
                    label="Title"
                    required
                    error={errors.title}
                    helperText={errors.title && 'Title is required'}
                  />
                );
              }}
            />
          </Grid>
          <Grid item>
            <Button id="job-submit" color="primary" type="submit" variant="contained">
              Create Job
            </Button>
          </Grid>
        </Grid>
      </form>
    </Grid>
  );

};

export default UserForm;