Actualmente estoy tratando de hacer un juego de estilo wordle con reaccionar.
En mi componente principal, tengo un useEffect que se ejecuta una vez para inicializar algunas cosas, así como para crear un eventListener "keydown".
useEffect(() => { //These two functions getWordList and updateColors don't really matter much for this issue I think. const getWordList = async () => { let response = await fetch(wordListUrl); var wordList = await response.text(); var wordListArr = wordList.split("\n"); setWords(wordListArr); const randomWord = wordListArr[Math.floor(Math.random() * wordListArr.length)]; setAnswer(randomWord); }; const updateColors = async () => { const newColors = {} as any; for (let c of alphabet) { newColors[c] = "bg-gray-400"; } setColors(newColors); }; //THIS FUNCTION is the one that's probably causing an issue. const setupKeys = async () => { document.addEventListener("keydown", logKey); function logKey(e: any) { if (e.code.match(/Key[AZ]/)) { handleInput(e.code[3].toLowerCase()); } if (e.code == "Enter" || e.code == "Backspace") { handleInput(e.code); } } }; getWordList(); updateColors(); setupKeys(); }, []);Luego tengo mi función handleInput escrita fuera de useEffect pero dentro del componente de la siguiente manera:
const handleInput = (keyPress: string) => { console.log(keyPress); if (keyPress == "Enter") { return; } if (keyPress == "Backspace") { return; } let oldWord = (curWord + keyPress).slice(0, 5); setCurWord(oldWord); let currentBoard = board; currentBoard[curLine] = oldWord; while (currentBoard[curLine].length < 5) currentBoard[curLine] += " "; setBoard([...currentBoard]); };Sin embargo, por alguna razón, cuando ejecuto este código, la placa se actualiza con mis pulsaciones de teclas, pero el estado de curWord nunca se almacena. Lo que quiero decir es que cuando console.log curWord, siempre es la cadena vacía en la que se inicializa, pero la placa se actualiza adecuadamente. No estoy seguro de por qué se actualiza el tablero, pero no la palabra.
He intentado jugar con useCallback pero nada de eso ha funcionado.
Un poco de ayuda sería muy apreciada.
Su función de controlador de eventos tiene el cierre del primer renderizado. Eso significa que el estado dentro del controlador es siempre el mismo. Debe actualizar el controlador de eventos cada vez que cambie el estado. Para hacer eso, cree un nuevo efecto de uso que cambie el controlador de eventos de pulsación de tecla con el estado en la matriz de dependencia.