React 根据前序状态数组项值设置state时选中球队重复问题解决

• 选中球队数组存储的是{team: 球队名}结构的对象，重复判断时直接将字符串类型的球队名与对象做相等比较，结果永远为真，重复校验完全失效
• 仅校验了数组第一个元素是否与当前球队一致，未覆盖第二个元素的校验场景，即使比较逻辑正确，选中第二支球队后重复点击第二支也会触发重复添加
• 使用当前渲染周期的gameState做状态判断，在React批量更新场景下可能出现状态滞后，导致判断结果不准确

替换原setTeam函数逻辑即可解决重复选中问题：

function setTeam(team){
  setGameState((prevState) => {
    // 校验当前球队是否已被选中
    const isSelected = prevState.selected_teams.some(item => item.team === team)
    // 仅未选中且已选数量不足2时才新增
    if (!isSelected && prevState.selected_teams.length < 2) {
      return {
        ...prevState,
        selected_teams: [...prevState.selected_teams, { team }]
      }
    }
    // 不满足条件时返回原状态，不触发更新
    return prevState
  })
}

如果需要实现点击已选中球队取消选择的交互，可使用如下逻辑：

function setTeam(team){
  setGameState((prevState) => {
    const isSelected = prevState.selected_teams.some(item => item.team === team)
    // 已选中则过滤掉当前球队，实现取消
    if (isSelected) {
      return {
        ...prevState,
        selected_teams: prevState.selected_teams.filter(item => item.team !== team)
      }
    }
    // 未选中且数量未满则新增
    if (prevState.selected_teams.length < 2) {
      return {
        ...prevState,
        selected_teams: [...prevState.selected_teams, { team }]
      }
    }
    return prevState
  })
}

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