Material UI AutoComplete结合Yup条件校验报concat类型错误

这个报错的根源是同字段的Yup校验规则基础类型前后不匹配：

1. 你给category字段声明的初始schema是string()字符串类型
2. 但在when条件分支的then逻辑里，你给这个字段返回的是object()对象类型的校验规则
   Yup在合并同字段的条件校验规则时，内部会调用concat()方法拼接前后规则，要求拼接的两个schema基础类型必须完全一致，string和object是互斥的两种基础类型，因此直接抛出类型不匹配错误。

除此之外你的条件判断逻辑本身也不符合需求：你写的is: false等价于要求new和exist两个值同时为false时才触发then里的必填规则，和“任意一个为true就必填”的要求完全相反。同时MUI AutoComplete在选择选项时，绑定的表单值本身就是包含id、name的对象，初始定义为string类型本身就和实际业务值不匹配。

1. 先把category字段的初始schema类型改成和实际值一致的object()类型，和AutoComplete返回的选项值结构对齐
2. 修正when的判断逻辑，明确判断两个依赖字段任意一个为true时，才触发必填校验
3. 补全otherwise分支逻辑，明确两个字段都不为true时字段非必填的规则

修正后的完整校验代码如下：

import { object, string, bool } from 'yup';

const validationSchema = object({
  category: object({
    id: string().required(),
    name: string().required(),
  })
    .nullable()
    .when(['new', 'exist'], {
      // 两个依赖字段任意一个为true时，触发必填校验
      is: (newValue, existValue) => Boolean(newValue) || Boolean(existValue),
      then: (schema) => schema.required('该字段为必填项'),
      // 两个字段均不为true时，字段非必填
      otherwise: (schema) => schema.notRequired(),
    }),
  new: bool().nullable(),
  exist: bool().nullable(),
});

补充说明 #

如果你的AutoComplete开启了freeSolo模式允许用户输入自定义文本值，此时category的表单值是字符串类型，就需要把整个规则统一改成string类型，条件分支里也不要返回object schema，保持全链路类型一致即可。

内容的提问来源于stack exchange，提问作者Joseph