Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

83
Visualizações
React useState está trabajando en un estado pero no en el otro

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.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda