React中3个输入框值唯一性校验问题：如何摆脱输入顺序依赖？

问题分析 #

当前代码的核心问题出在onChange事件内的唯一性校验逻辑：

1. 在Roles.map循环中多次调用setUsersUnique，状态更新会被最后一次调用覆盖，导致判断结果不准确。
2. 校验逻辑逻辑倒置：用旧数组的includes判断新值是否存在，错误地将“旧数组不含新值”设为usersUnique=false，和“所有值唯一时为true”的需求相悖。
3. 仅检查当前输入值与旧数组的关系，未做全局唯一性校验，导致结果完全依赖输入顺序。

修正方案 #

核心思路：把唯一性校验从输入事件中抽离，改为监听表单数据变化，每次数据更新后统一校验所有输入值的唯一性，彻底摆脱输入顺序的影响。

步骤1：简化输入框的onChange事件 #

移除onChange里的setUsersUnique逻辑，让它只负责更新表单数据（可额外添加trim()避免空格导致的误判）：

{productFormData.Roles.map((role: string, index: number) => {
  return (
    <div className={`form-group input-buyer-${index}`} key={index}>
      <Input
        name={`role-${index}`}
        type="text"
        id={`buyer-role-${index}`}
        placeholder={rolesPlaceHolderList[index]}
        onChange={(event) =>
          setProductFormData({
            ...productFormData,
            Roles: productFormData.Roles.map(
              (item: string, i: number) => {
                if (index === i) return event.target.value.trim();
                return item;
              }
            ),
          })
        }
        label={`${roleLabels[index]} [Required]`}
        value={role}
      />
      {simpleValidator.current.message(
        `${personasErrorLabels[index]}`,
        role.trim(),
        `required|min:2|max:250`
      )}
    </div>
  );
})}

步骤2：新增useEffect监听Roles数组，做全局唯一性校验 #

当productFormData.Roles变化时，统一检查所有值是否唯一，更新usersUnique状态：

useEffect(() => {
  // 先对每个值去空格，避免空格导致的重复误判
  const trimmedRoles = productFormData.Roles.map(role => role.trim());
  
  // 方法1：用Set判断（简洁高效，推荐）
  // Set自动去重，若去重后的长度和原数组一致，则所有值唯一
  const isAllUnique = new Set(trimmedRoles).size === trimmedRoles.length;

  // 方法2：遍历检查（兼容旧环境，或需要更细粒度的重复定位）
  // const isAllUnique = trimmedRoles.every((role, idx) => trimmedRoles.indexOf(role) === idx);

  setUsersUnique(isAllUnique);
}, [productFormData.Roles]);

步骤3：修正按钮状态的useEffect #

给原有的按钮状态监听添加正确的依赖项，避免无限循环，同时修正判断逻辑（usersUnique为true表示所有值唯一）：

useEffect(() => {
  // 按钮启用条件：表单验证通过 + summaryValidation为false + 所有角色值唯一
  const shouldEnable = simpleValidator.current.allValid() && !summaryValidation && usersUnique;
  setBtnDisabled(!shouldEnable);
}, [simpleValidator, summaryValidation, usersUnique]);

方案优势 #

• 完全脱离输入顺序依赖：每次数组变化时全局校验所有值，不管用户填写顺序如何，结果一致。
• 职责分离：输入事件仅负责更新数据，校验逻辑单独处理，代码更清晰易维护。
• 避免状态更新冲突：不再在循环中多次调用setUsersUnique，状态更新更可靠。

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