映射值时 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 (将#修改为@）