本文介绍在 react 表单中动态校验多个输入字段值唯一性的实用方法，通过 set 去重并结合 useeffect 实时控制提交按钮状态，避免依赖输入顺序的脆弱逻辑。
本文介绍在 react 表单中动态校验多个输入字段值唯一性的实用方法，通过 set 去重并结合 useeffect 实时控制提交按钮状态，避免依赖输入顺序的脆弱逻辑。
在构建多字段表单（如角色、用户身份、标签等需互斥的字符串输入）时，仅检查“新值是否已存在”是不够的——它容易因输入/修改顺序不同而产生误判（例如先填 admin 再填 user，后将 admin 改为 user，旧逻辑可能仍认为唯一）。真正健壮的校验应基于当前全部字段的实时快照，判断是否满足「全部非空且互不重复」这一整体约束。
推荐采用以下简洁可靠的方案：
useEffect(() => {
const { Roles } = productFormData;
// 1. 确保有且仅有 3 个值（可按需调整）
if (Roles.length !== 3) {
setBtnDisabled(true);
return;
}
// 2. 使用 Set 去重，比较原始数组与去重后长度
const uniqueCount = new Set(Roles).size;
// 3. 仅当全部 3 个值均存在且互异时才启用按钮
setBtnDisabled(uniqueCount !== 3);
}, [productFormData.Roles]);✅ 优势说明：
- 与顺序无关：无论用户修改哪个字段、以何种顺序填写，都基于最终数组整体计算；
- 语义清晰：new Set(Roles).size === Roles.length 直观表达「无重复」；
- 高效轻量：Set 构建与长度获取为 O(n) 时间复杂度，对少量字段（如 3 个）几乎无性能负担；
- 易于扩展：若需支持空值跳过校验，可先过滤：const nonEmptyRoles = Roles.filter(r => r.trim() !== '');，再校验其唯一性与数量。
⚠️ 注意事项：
- 若业务允许空值（如部分字段可选），需明确定义「空值是否参与唯一性判断」。常见做法是：空字符串视为无效值，仅校验非空项的唯一性；
- 避免在 onChange 中同步执行 setUsersUnique 类状态更新——这会引发冗余渲染，且状态滞后于实际输入；所有聚合校验应统一收口至 useEffect；
- 结合 simpleValidator.current.allValid() 使用时，建议将 usersUnique 状态移除，直接用 uniqueCount === 3 参与最终按钮逻辑，保持状态单一可信源（Single Source of Truth）。
综上，用 Set 进行数组级去重校验，是解决多字段值唯一性问题的简洁、可靠且符合 React 思维的最佳实践。
