Soy nuevo en React y estoy tratando de construir un juego del ahorcado. En este momento estoy usando una lista codificada de palabras entre las que el programa puede elegir. Hasta ahora todo funcionó muy bien, pero ahora estoy tratando de restablecer el juego y el componente de reacción que debería volver a generarse con un solo clic solo se vuelve a generar después de dos clics en el botón de reinicio y no sé por qué.
estos son los estados que estoy usando:
function App() { const [numberInList, setNumberInList] = useState(0) const randomWordsList = ["comfort", "calm", "relax", "coffee", "cozy"]; const [generatedWord, setGeneratedWord] = useState( randomWordsList[numberInList] ); const [generatedWordLetters, setGeneratedWordLetters] = useState( randomWordsList[numberInList].split("").map((letter) => { return { letter: letter.toUpperCase(), matched: false }; }) ); function resetGame(){ setNumberInList(prev => prev + 1) setGeneratedWord(randomWordsList[numberInList]) setGeneratedWordLetters( generatedWord.split("").map((letter) => { return { letter: letter.toUpperCase(), matched: false }; }) ); setFalseTries(0) }esta es la función de reinicio que estoy usando dentro de la función, cada estado se actualiza correctamente aparte del estado de WordLetters generado, que solo se actualiza al hacer clic en el botón de reinicio dos veces.
Parece que no puedo resolver este problema por mi cuenta, ¡así que agradezco cualquier ayuda!
Verifique useEffect on React. Puede usar la bandera booleana como estado, coloque los parámetros useEffect como se muestra a continuación
React.useEffect(() => { // here your code works },[flag])flag es su estado booleano cuando cambia en la función de reinicio, su componente vuelve a renderizar