本文介绍一种基于 set 数据结构的轻量级方案，用于实时校验多个表单字段（如角色输入框）的值是否互不重复，确保用户提交的 3 个角色值全部唯一，从而精准控制提交按钮状态。
本文介绍一种基于 set 数据结构的轻量级方案，用于实时校验多个表单字段（如角色输入框）的值是否互不重复，确保用户提交的 3 个角色值全部唯一，从而精准控制提交按钮状态。
在 React 表单开发中，当需要约束多个同类型输入字段（例如 3 个角色文本框）的值必须两两不同，仅依赖“输入时即时比对前序值”的方式（如 includes() 检查当前值是否已存在于数组中）容易导致逻辑缺陷——它受输入顺序影响，无法反映最终整体状态。例如：用户先填 ["Admin", "Editor"]，再将第一个改为 "Editor"，此时数组变为 ["Editor", "Editor"]，但按原逻辑可能仍误判为“唯一”，因为变更发生在已有项上，而未重新全量校验。
更健壮的做法是：在每次表单数据更新后，对整个 Roles 数组进行一次性、无序的全局去重校验。利用 JavaScript 原生 Set 的自动去重特性，可简洁实现：
useEffect(() => {
const { Roles } = productFormData;
// 确保 Roles 是长度为 3 的数组（业务前提）
if (Roles.length !== 3) {
setBtnDisabled(true);
return;
}
const uniqueRoles = Array.from(new Set(Roles));
// 若去重后数量 < 3，说明存在重复值
setBtnDisabled(uniqueRoles.length < 3);
}, [productFormData.Roles]);该方案优势显著：
- ✅ 与输入顺序无关：无论用户修改哪个字段、以何种顺序填写，均基于最终数组全量判断；
- ✅ 语义清晰：new Set(Roles) 直观表达“提取所有不重复值”，Array.from() 转为数组便于取长度；
- ✅ 性能高效：Set 构建时间复杂度为 O(n)，远优于嵌套循环或多次 includes()；
- ✅ 契合业务约束：明确要求必须提供且仅提供 3 个角色，因此 length < 3 即等价于“存在重复或缺失”。
⚠️ 注意事项：
- 确保 productFormData.Roles 始终为字符串数组（避免 null/undefined 或空字符串混入）。可在 onChange 中增加清洗逻辑，例如 event.target.value.trim()；
- 若需向用户展示具体错误提示（如“角色不能重复”），建议额外维护一个校验状态（如 rolesUnique: boolean），而非仅控制按钮禁用；
- 不要将 setBtnDisabled 逻辑放在 onChange 内部——易引发重复渲染或状态竞态；应统一交由 useEffect 响应式监听。
综上，使用 Set 进行全量去重校验，是以最小成本换取最高可靠性的最佳实践。它剥离了交互时序干扰，直击“数据集合唯一性”这一本质需求，是表单约束类场景中的推荐范式。
