为什么 YUP 条件验证导致 Branch is not a function at Condition.fn 错误

Question

我的表单上有一个 MUIRadioGroup（选项 = 低、中和高）和一个多选 MUIAutocomplete 组件。

<MUIRadioGroup
              name="requestDetail.riskAssesmentDetail.riskClassification"
              label="Risk Classification"
              variant="outlined"
              size="small"
              defaultValue
            />

<MUIAutocomplete
                  name="requestDetail.riskAssesmentDetail.safetyDetail.investigationType"
                  label="Type of Investigation"
                  variant="outlined"
                  size="small"
                  multiple
                  disableCloseOnSelect
                  options={API_Safety_InvestigationType}
                />

我的架构是...

requestDetail: yup.object().shape({ ...
    riskAssesmentDetail: yup.object().shape({
      riskClassification: yup
        .string()
        .label("Risk Classification")
        .required()
        .typeError("Invalid Selection"),
      safetyDetail: yup
        .object()
        .shape()
        .when("riskClassification", {
          is: (riskClassification) =>
            ["Medium", "High"].includes(riskClassification),
          then: yup.object({
            investigationType: yup
              .array()
              .label("Type of Investigation")
              .min(1),
          }),
        }),
    }),

当单选按钮为“中”或“高”时，我需要对 MUIAutocomplete 组件执行验证。

我收到错误...

Uncaught (in promise) TypeError: branch is not a function
    at Condition.fn (index.esm.js:175:1)
    at Condition.resolve (index.esm.js:188:1)
    at index.esm.js:586:1
    at Array.reduce (<anonymous>)
    at ObjectSchema.resolve (index.esm.js:586:1)
    at ObjectSchema._cast (index.esm.js:1670:1)
    at ObjectSchema.cast (index.esm.js:610:1)
    at ObjectSchema._cast (index.esm.js:1683:1)
    at ObjectSchema.cast (index.esm.js:610:1)
    at ObjectSchema._cast (index.esm.js:1683:1)

如果我删除条件验证所有工作......

requestDetail: yup.object().shape({ ...

    riskAssesmentDetail: yup.object().shape({
      riskClassification: yup.string().label("Risk Classification").required(),
      safetyDetail: yup
        .object()
        .shape({
          investigationType: yup.array().label("Type of Investigation").min(1),
        }),
    }),

此错误是关于什么的以及如何修复它？

Answer 1

我也刚刚遇到这个问题。您的验证需要更改为在属性上具有函数then。

      safetyDetail: yup
        .object()
        .shape()
        .when("riskClassification", {
          is: (riskClassification) =>
            ["Medium", "High"].includes(riskClassification),
          then: () => yup.object({
            investigationType: yup
              .array()
              .label("Type of Investigation")
              .min(1),
          }),
        }),

Answer 2

我在升级时遇到了同样的问题。旧版本的 yup 接受以下内容。

someField: string().when("someOtherField", {
      is: true,
      then: string()
        .max(5, "Must be 5 characters or less")
        .required("Required")
    })

升级 yup 后，上面的代码给了我一个 TypeScript 错误。我使用以下方法解决了它

someField: string().when("someOtherField", {
      is: true,
      then: () => string()
        .max(5, "Must be 5 characters or less")
        .required("Required")
    })