自动提交时反应 Formik 更改验证

如何解决自动提交时反应 Formik 更改验证

我有一个多步表单，每个部分底部都有一个提交按钮，还有一个可点击的部分列表以供导航。我已经实现了一个自动提交功能，如果用户更新信息然后使用菜单导航离开而不点击提交按钮，该功能就会运行：

 const AutoSubmit = () => {
   const { dirty,submitForm } = useFormikContext();
   React.useEffect(() => {
     if (dirty) {
       submitForm();
     }
   },[dirty,submitForm]);
   return null;
 };

问题是，如果 Yup 验证失败，那么提交显然会被阻止，并且上一部分的任何信息都会丢失。基本上，我想要做的是在用户单击实际提交按钮时触发完整验证，但如果是自动提交则进行部分验证（即没有必填字段），以便可以保存他们的进度。

我尝试使用 setFieldValue 在上述组件中设置“autoSubmit: true”标志，然后将 Yup Schema 更改为仅需要字段等，如果它不存在或为 false，但它似乎没有在提交的时间（大概与卸载组件时它的运行有关）。任何人都知道如何让这个工作？

谢谢

解决方法

所以我对此进行了一些重新思考，并认为我应该发布我的解决方案，以防万一有人觉得它有用。我基本上决定绕过对部分提交的 Formik 验证，并让后端处理它。由于这将是一个静默提交，因此不需要验证的用户反馈，并且因为它假设某些数据可能丢失等，这似乎是后端应该决定的事情。

唯一的另一个问题是 Formik 每次表单数据更改时都会重新渲染。我的要求是仅在用户导航离开表单部分时触发此部分提交，因此我上面的示例不合适，因为它会在每次重新渲染时触发。为了解决这个问题，我使用了一个 ref 并将函数放在 Formik 之外：

function FormComponent() {
  const formRef = useRef();

  useEffect(() => {
    return async () => {
      const {dirty,isSubmitting,values} = formRef.current;

      if (!isSubmitting && dirty) {
        try {
          await doPartialSubmission(values);
        } catch (error) {
          // Handle error
        }
      }
    };
  },[formRef])

  return (
    <Formik
      innerRef={formRef}
      onSubmit={doFullValidatedSubmit()}
    >
      //Standard formik stuff...
    </Formik>
  );
};