React JS输入验证：5个状态值的唯一性校验实现

嘿，我完全懂你现在的困扰——要是给5个state值写一堆两两对比的判断，不仅代码臃肿，以后再加个新值还得改一堆逻辑，实在太麻烦了。其实我们可以用更通用、可扩展的方法来做重复验证，不管是5个还是更多值都能轻松搞定。

方法一：用Set快速判断是否有重复（简洁通用） #

Set的特性会自动剔除重复元素，所以我们只需要把所有state值放进数组，然后对比原数组长度和Set的大小就行——如果不一样，说明存在重复值：

validation = () => {
  // 解构取出所有state值
  const { val1, val2, val3, val4, val5 } = this.state;
  // 把值放进数组
  const values = [val1, val2, val3, val4, val5];
  
  // 去重后的Set长度和原数组不等 → 存在重复
  const hasDuplicates = new Set(values).size !== values.length;
  
  return hasDuplicates ? '所有输入值必须唯一，请修改重复项' : null;
};

这个方法的优势在于扩展性极强——以后要是新增val6，只需要把它加到values数组里就行，核心验证逻辑完全不用改。

方法二：返回具体重复值的错误提示（优化用户体验） #

如果想给用户更明确的反馈，告诉他们到底是哪个值重复了，可以用一个对象来统计每个值的出现次数，一旦发现次数超过1就返回具体错误：

validation = () => {
  const { val1, val2, val3, val4, val5 } = this.state;
  const values = [val1, val2, val3, val4, val5];
  const valueCount = {};

  for (const val of values) {
    // 统计当前值的出现次数
    valueCount[val] = (valueCount[val] || 0) + 1;
    // 一旦发现重复，立即返回具体错误
    if (valueCount[val] > 1) {
      return `值 "${val}" 重复了，请修改`;
    }
  }

  return null;
};

额外提醒 #

初始化state的时候，你已经设置了val1到val5为a到e，都是唯一值，这很好。以后如果要修改初始值，记得也要保证它们的唯一性哦～

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