如何解决映射值时 Formik isValid 会发生变化
我正在初始化表单数据,其状态为空值用于表单表单。在那之后,我调用 API 来获取某些权限,这些权限附加到状态。在设置这些权限之前,formik isValid 工作正常,并使用 Yup 验证架构向我显示表单无效。但是一旦将权限值附加到表单状态,isValid 就会显示表单是有效的。 我一输入,isValid 就会开始工作。
我的状态和 API 调用:
const [formData,setFormData] = useState(inviteMemberObject);
useEffect(() => {
axios({
url: "/member/permssion/page",method: "GET",authToken: auth.authToken,})
.then((response) => {
if (response.data.status) {
setFormData((prevValue) => ({
...prevValue,permissions: response.data.data.map((page) => ({
...page,access: false,})),}));
}
})
.catch((error) => console.log(error));
},[auth.authToken]);
成员对象:
export const inviteMemberObject = {
firstName: "",lastName: "",email: "",gender: "",permissions: [],};
Formik 实例:
<Formik
enableReinitialize
initialValues={formData}
validationSchema={validationSchema}
validateOnMount
onSubmit={handleSubmit}
>
{({
errors,handleBlur,handleChange,handleSubmit,isSubmitting,touched,values,isValid,}) => (
<form novalidate onSubmit={handleSubmit}>
<Formdisplay
values={values}
touched={touched}
errors={errors}
handleBlur={handleBlur}
handleChange={handleChange}
isSubmitting={isSubmitting}
isValid={isValid}
/>
</form>
)}
</Formik>
是的验证:
import * as Yup from "yup";
const validationSchema = Yup.object().shape({
firstName: Yup.string().max(25).required("First Name is required"),lastName: Yup.string().max(25).required("Last Name is required"),email: Yup.string()
.email("Enter a valid email")
.max(255)
.required("First Name is required"),gender: Yup.string().required("Please select a gender"),});
export default validationSchema;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。