Estoy tratando de crear un juego usando ganchos React. Esencialmente, te dan la historia de la carrera de un jugador de fútbol y tienes que adivinar qué jugador es.

Sin embargo, tengo un problema, porque en raras ocasiones puede adivinar un jugador, por ejemplo, 'beckham' y luego el siguiente jugador generado puede tener el mismo nombre 'beckham' pero ser un jugador completamente diferente, irónicamente, tiene el mismo nombre.

Mi problema es que tengo un efecto de uso con una dependencia de conjetura, por ejemplo, 'beckham' y luego se ejecuta un código para verificar la respuesta.

Pero si tiene un jugador con un apellido idéntico nuevamente en el siguiente jugador y vuelve a adivinar 'beckham', entonces el código de respuesta de verificación nunca se ejecuta porque useEffect observa la dependencia de conjetura y dice que es lo mismo que antes. No estoy ejecutando el código. en el interior.

Ejemplo de código abierto

https://codepen.io/joe-consterdine/pen/popmNrE

Aquí, useEffect nunca se volverá a representar porque 'joe' siempre es la suposición, pero en el juego hay dos joes, por lo que no es la misma persona.

Gracias

 const [players, setPlayers] = React.useState([ { id: 0, name: 'joe' }, { id: 2, name: 'joe' }, ]); const [guess, setGuess] = React.useState('joe'); const handleOnSubmit = (event) => { event.preventDefault(); // setGuess('james'); setGuess('joe'); } React.useEffect(() => { console.log('re rendered'); }, [guess]) return ( <div> <form onSubmit={handleOnSubmit}> <input type="text" /> <button type="submit">Submit</button> </form> {players.map(player => ( <p key={player.id}>{player.name}</p> ))} </div> ); }