使用 Formik 和 Yup 在 React 中未提交表单

Question

I'm using Autocomplete component in Material UI and I'm using Formik and Yup for validations. My problem is that when I submit my values and console it. It doesn't appear which means it doesn't conform to its yup validation.

Pls check my codesandbox here Click here

<Formik
  validationSchema={citySchema}
  initialValues={{ city_id: [{ id: null, name: "" }] }}
  onSubmit={submit}
>
  {({ handleChange, values, setFieldValue, touched, errors }) => (
    <Form>
      <Autocomplete
        id="city_id"
        name="city_id"
        options={cities}
        getOptionLabel={(option) => option.name}
        style={{ width: 300 }}
        onChange={(e, value) => {
          setFieldValue("city_id", value);
        }}
        renderInput={(params) => (
          <TextField
            label="City"
            variant="outlined"
            helperText={touched.city_id && errors.city_id}
            error={touched.city_id && Boolean(errors.city_id)}
            {...params}
          />
        )}
      />
      <Button variant="contained" color="primary" type="submit">
        Submit
      </Button>
    </Form>
  )}
</Formik>

Answer 1

Your validationSchema requires a name but your code never supplies it. Either make it optional or add a name input field.

An easy way to debug this is to print out the errors formik is supplying you:

 <Form>
          <pre>{JSON.stringify(errors, null, 2)}</pre>
          <Autocomplete
            ...