formik setErrors 重置其他字段答案

【问题标题】：formik setErrors reseting the other fieldsformik setErrors 重置其他字段
【发布时间】：2022-07-07 13:16:54
【问题描述】：

我有一个表单，我使用 formik 进行验证，例如

const formik = useFormik({
  enableReinitialize: true,
  initialValues: {
    name: insurer && get(insurer, "name", null),
    surname: insurer && get(insurer, "surname", null),
    postalCode: insurer && get(insurer, "postalCode", null),
  },

  onSubmit: (values: any) => {},
  validationSchema: Yup.object().shape({
    name: Yup.string()
      .typeError("Preenche este campo")
      .required("Preenche este campo"),
    surname: Yup.string()
      .typeError("Preenche este campo")
      .required("Preenche este campo"),
  }),
});

如您所见，我有三个字段名称，surename 和 postalCode，其中我还定义了姓名和姓氏的验证，对于 postalCode，我正在点击一个 API，它为无效的 postalCode 返回 false

所以当我最初提交表单时，我看到了错误

Object { surname: "Preenche este campo", name: "Preenche este campo" }

现在，如果我开始输入邮政编码，我会从 api 收到错误，然后我将其设置为

formik.setErrors({postalCode:'error in postal code' });

但是现在当我控制台日志时

console.log(formik.errors)

我只看到此字段的错误，其他字段错误已重置

Object { postalCode: "error in postal code" }

【问题讨论】：

标签： reactjs formik

【解决方案1】：

formik.setErrors 适用于所有错误，{postalCode:'error in postal code' } 只是许多其他错误中的一个特定错误，因此当您单独设置它时，会消除所有其他字段的错误。

在这种情况下，您应该将其他字段的错误 formik.errors 与更新后的错误一起传递给该函数。

formik.setErrors({ ...formik.errors, postalCode:'error in postal code' });

【讨论】：