本文介绍如何在 React 中高效校验多个动态输入字段（如角色输入框）的值是否全部唯一，通过 Set 去重并结合 useEffect 实时控制提交按钮状态，避免依赖输入顺序的脆弱逻辑。
本文介绍如何在 react 中高效校验多个动态输入字段（如角色输入框）的值是否全部唯一，通过 `set` 去重并结合 `useeffect` 实时控制提交按钮状态，避免依赖输入顺序的脆弱逻辑。
在构建多字段表单（例如需填写 3 个互不相同的职位角色）时，仅靠“输入时检查是否已存在”这类局部判断容易出错——比如先填 Admin，再填 Editor，最后将第一个改为 Editor，此时虽有两个重复值，但因 onChange 仅对比当前输入与旧数组，可能漏判。理想方案应全局校验整个数组状态，而非逐次响应。
推荐使用 Set 进行一次性去重验证，因其天然具备唯一性约束：
useEffect(() => {
const { Roles } = productFormData;
// 确保有且仅有 3 个值（业务要求）
if (Roles.length !== 3) {
setBtnDisabled(true);
return;
}
// 利用 Set 自动去重，比较长度即可判断是否全部唯一
const uniqueCount = new Set(Roles).size;
setBtnDisabled(uniqueCount <p>✅ <strong>优势说明：</strong> </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8476" title="react-pro"><img
src="https://img.php.cn/upload/skill/000/000/081/179206034644870.jpg" alt="react-pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8476" title="react-pro" class="overflowclass">react-pro</a>
<p class="overflowclass">你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...</p>
</div>
<a rel="nofollow" href="/xiazai/skill8476" title="react-pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 无序鲁棒性：无论用户修改哪个字段、以何种顺序输入或修改，只要最终 Roles 数组含重复项，Set.size 必然小于 3；
- 简洁高效：时间复杂度 O(n)，无嵌套循环或多次 includes() 调用；
- 职责清晰：校验逻辑从 onChange 中解耦，交由 useEffect 统一响应数据变更，符合 React 数据流最佳实践。
⚠️ 注意事项：
- 若允许空值（如未填字段为 ""），需提前过滤：const filteredRoles = Roles.filter(role => role.trim() !== "");，再校验其唯一性和数量；
- Set 对 NaN 和 -0 等特殊值有特定行为，但本例中角色为字符串，无需额外处理；
- 结合表单其他校验（如必填、长度）时，建议统一在 useEffect 中聚合判断，避免多个 effect 相互覆盖 setBtnDisabled。
最终，setBtnDisabled 的状态将精准反映「3 个角色是否全部非空、有效且互异」，既提升用户体验，也增强代码可维护性。
