React校验state数组内用户名重复时addgamer方法失效排查

你的代码没有达到预期，核心是addgamer方法的校验逻辑写在了循环内部，存在3个明显漏洞：

• 没有完成全量校验：只要循环碰到第一个用户名不重复的元素，就会直接进入else分支执行新增，根本不会校验数组后面的元素是否存在重名用户
• 重复触发新增：for循环每匹配到一个不重名的元素，就会触发一次setState新增操作，如果数组里有N个不重名的用户，当前输入的玩家就会被重复添加N次
• 空数组场景失效：当gamers数组为空时，for循环不会执行任何逻辑，哪怕输入的用户名合法也无法完成新增

直接替换原有的addgamer方法即可，推荐用数组的some()方法做存在性判断，逻辑更清晰也不会出现上述漏洞：

addgamer = (event) =>{
  event.preventDefault();
  // 遍历全数组校验用户名是否重复，加trim()避免首尾空格导致的校验误判
  const isDuplicated = this.state.gamers.some(item => item.UserName.trim() === this.state.gamer.UserName.trim());
  
  if (isDuplicated) {
    // 此处可自定义重复提示，比如 alert("用户名已存在")
    return false;
  }

  // 确认无重复后再统一执行新增，新增时浅拷贝gamer对象避免后续引用联动修改
  this.setState(prevstate => ({
    gamers: [...prevstate.gamers, {...this.state.gamer}],
    gamer: {FirstName:"", LastName: "", UserName: ""}
  }))
}

额外优化点：原代码新增时直接存入this.state.gamer对象引用，后续输入框修改state.gamer的值时，会连带修改已经存入gamers数组里的历史数据，新增时做一次对象浅拷贝即可规避这个问题。

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