React下拉框Yup验证出现Cyclic Dependency（循环依赖）问题求助

问题分析 #

你遇到的循环依赖错误，是因为原代码中两个颜色字段的when验证规则互相依赖：FirstColorDDL的验证依赖SecondColorDDL的值，同时SecondColorDDL的验证又依赖FirstColorDDL的值，Yup无法处理这种循环引用的逻辑。另外原代码的when条件逻辑也和你需要的规则不匹配，需要调整。

正确的验证方案 #

改用Yup的test方法替代when，test可以通过this.parent访问整个表单的所有字段值，彻底避免循环依赖，同时精准实现你需要的验证规则：

const colorSchema = Yup.object().shape({
  FirstColorDDL: Yup.string()
    .required('请选择颜色！')
    .test(
      'valid-first-color',
      '当第二个颜色非白色时，第一个颜色不能选白色',
      function(value) {
        const { SecondColorDDL } = this.parent;
        // 规则：第二个颜色非白时，第一个不能是白
        if (SecondColorDDL && SecondColorDDL !== 'White' && value === 'White') {
          return false;
        }
        return true;
      }
    ),
  SecondColorDDL: Yup.string()
    .required('请选择颜色！')
    .test(
      'valid-second-color',
      '当第一个颜色非白色时，第二个颜色不能选白色',
      function(value) {
        const { FirstColorDDL } = this.parent;
        // 规则：第一个颜色非白时，第二个不能是白
        if (FirstColorDDL && FirstColorDDL !== 'White' && value === 'White') {
          return false;
        }
        return true;
      }
    )
})
// 全局验证：除双白组合外，不能选相同颜色
.test(
  'non-white-not-duplicate',
  '除双白组合外，不能选择相同颜色',
  function(values) {
    const { FirstColorDDL, SecondColorDDL } = values;
    if (FirstColorDDL !== 'White' && SecondColorDDL !== 'White' && FirstColorDDL === SecondColorDDL) {
      return false;
    }
    return true;
  }
);

规则对应说明 #

• 双白组合(White-White)：所有验证规则都通过，符合要求
• White-Red：SecondColorDDL为非白，触发FirstColorDDL的test规则，返回错误
• Red-White：FirstColorDDL为非白，触发SecondColorDDL的test规则，返回错误
• Red-Red：全局test规则检测到非白且颜色相同，返回错误
• Red-Green/Green-Red/Yellow-Red：所有规则都满足，验证通过
• Yellow-White：FirstColorDDL为非白，触发SecondColorDDL的test规则，返回错误

原代码问题点 #

1. 循环依赖：两个字段用when互相引用，导致Yup解析schema时报错
2. 逻辑错误：原when的条件和你需要的验证规则相反，比如原代码中当SecondColorDDL为White时要求FirstColorDDL选其他颜色，这和你的规则逻辑完全不符

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