为 Formik 表单开发复杂的 Yup 验证时出现问题

Question

我有一个复杂的 Formik 表单，我正在尝试对其应用验证。我当前的架构如下：

const applyPaymentFormValidation = yup.object().shape({
  payments: yup.array().of(
    yup.object().shape({
      applied: yup
        .number(),
    })
  ),
  newPayments: yup.array().of(
    yup.object().shape({
      total: yup.number(),
      paymentType: yup.number().required("Select a payment method"),
      date: yup
        .date()
        .required("A date must be provided")
        .max(tomorrow, "You cannot future date a transaction"),
      paymentNumber: yup.string().nullable(),
    })
  ),
  invoiceLines: yup.array().of(
    yup.object()
      .shape({
        clientAmountPaid: yup
          .number()
          .required("You must provide a valid amount")
          .min(0, "You must provide a valid amount"),
        insurAmountDue: yup
          .number()
          .required("You must provide a valid amount")
          .min(0, "You must provide a valid amount"),
        writeOff: yup
          .number()
          .required("You must provide a valid amount")
          .min(0, "You must provide a valid amount"),
        amountDue: yup
          .number()
          .required("You must provide a valid amount")
          .min(0, "You must provide a valid amount"),
      })
      .test(
        "amountTest",
        "Client due + insurer due - writeoff must total up the the amount due",
        function (value) {
          return (
            defaultNullUndefined(value.clientAmountDue, 0) +
              defaultNullUndefined(value.insurAmountDue, 0) -
              defaultNullUndefined(value.writeOff, 0) ===
            defaultNullUndefined(value.amountDue, 0)
          );
        }
      )
      .test(
        "writeOffBelowTotalTest",
        "Cannot write off more than line total",
        function (value) {
          return (
            defaultNullUndefined(value.writeOff, 0) <=
            defaultNullUndefined(value.amountDue, 0)
          );
        }
      )
  ),
  // can you add .test here for tests across properties of the parent shape?
});

我正在尝试开发一个验证来检查所有invoiceLines.clientAmountDue 的总和是否等于所有 payment.applied 的总和。我在我认为此检查的末尾添加了一条注释，但我不确定语法。我尝试了 .test()，但同样无法完全理解。我可以参考任何建议或资源以获得更多见解吗？

作为后续操作，如果付款不存在，我只需要验证 newPayments ，反之亦然。有类似的解决方案吗？

这是我当前的测试以及产生的错误：

  .test("total_test", "total error", (payments: any, invoiceLines: any) => {
    let paymentsTotal = payments.reduce(
      (total: any, value: any) => total + value.applied
    );
    let invoiceLinesTotal = invoiceLines.reduce(
      (total: any, value: any) => total + value.clientAmountPaid
    );
    return paymentsTotal === invoiceLinesTotal;
  });

payments.reduce is not a function
TypeError: payments.reduce is not a function

Answer 1

问题是你得到了一个未定义的变量。具有值的变量位于 1 个参数中，请执行以下操作：

.test("total_test", "total error", (values: any) => {
  let paymentsTotal = values.payments.reduce(
    (total: any, value: any) => total + value.applied
  );
  let invoiceLinesTotal = values.invoiceLines.reduce(
    (total: any, value: any) => total + value.clientAmountPaid
  );
  return paymentsTotal === invoiceLinesTotal;
})