Hola, soy nuevo en la programación y estoy tratando de crear una función en React que agregue un equipo a una variedad de equipos seleccionados, pero solo si hay menos de 2 equipos seleccionados y si el equipo está disponible (no ya elegido). Está trabajando para limitar la matriz a solo 2 valores, pero la matriz aceptará el mismo equipo dos veces y no estoy seguro de por qué. Por ejemplo, si el usuario hace clic en ATL dos veces, ese equipo estará en la matriz dos veces. ¿Qué hice mal aquí y qué debo cambiar para solucionarlo? Lo siento si la pregunta es demasiado simple para este foro, soy nuevo.
Aquí está el código donde estoy cambiando el estado y comprobando si gameState.selected_teams[0] != equipo:
function App() { const [gameState, setGameState] = useState({ cards: Cards, selected_teams: [] }); function setTeam(team){ if (gameState.selected_teams.length < 2 && gameState.selected_teams[0] != team) { setGameState((prevState) => ({ cards: prevState.cards, selected_teams: [ ...prevState.selected_teams, { team } ] })) } }Y para el componente que llama a la función setTeam:
function TeamSelect({cards, setTeam}) { var teams = Object.keys(cards); return ( <div className='flex-container'> <div className='team-container'> { teams.map(team => ( <div onClick={() => setTeam(team)} className='team-label' key={team}> {team} </div> )) } </div> </div> ) }Estás agregando un objeto {team: team} a la matriz de equipos seleccionada cada vez que haces clic aquí:
selected_teams: [ ...prevState.selected_teams, { team } ] pero la clave de su team que pasa a su función setTeam es una cadena, por lo que su comparación falla cuando intenta comparar una cadena con un objeto. Puede cambiar su comparación para extraer la propiedad del team de su objeto:
gameState.selected_teams[0]?.team != team el ? asegura que exista un valor en el índice 0 en su matriz antes de usar .team en él (de lo contrario, obtendría un error si no está undefined ).
Puede adaptar este código para manejar más de un objeto usando .every() para verificar que todos los objetos en selected_team's no sean iguales al que está agregando:
if(gameState.selected_teams.length < 2 && gameState.selected_teams.every(obj => obj.team != team) Si no necesita pasar un objeto {team: team} (ya que un objeto con una propiedad no agrega mucho valor), simplemente puede insertar su cadena de team en sus equipos seleccionados y usar .includes() para compruebe si el equipo que está agregando ya existe en la matriz:
selected_teams: [ ...prevState.selected_teams, team ] luego puede actualizar su condición para usar .includes() :
if(gameState.selected_teams.length < 2 && !gameState.selected_teams.includes(team))