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

问题描述

我在 Material UI 中使用 Autocomplete 组件，并使用 Formik 和 Yup 进行验证。 我的问题是，当我提交我的值并安慰它时。它没有出现，这意味着它不符合其 yup 验证。

请在这里检查我的代码和框 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>

解决方法

您的 validationSchema 需要一个 name，但您的代码从不提供它。 将其设为可选或添加 name 输入字段。

一种简单的调试方法是打印 formik 提供给您的错误：

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