如何解决使用 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
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。