Событие keydown не работает должным образом в React ⇐ Javascript

[Anonymous]

Я пытаюсь воссоздать Wordle в качестве практики для React, и у меня возникли проблемы с событием нажатия клавиши. Идея состоит в том, что когда я нажимаю букву, программа записывает эту букву в ячейку и переходит к следующей. А когда вы нажимаете клавишу Backspace, она удаляет последнюю букву и переходит к предыдущей ячейке. (Если я не совсем ясно выражаюсь, вы можете попробовать игру, выполнив поиск по Wordle в Google).
Нажатие буквы работает нормально, но когда я нажимаю клавишу Backspace, оно не работает должным образом. При первом нажатии буква не удаляется, а перемещается на предыдущую ячейку. При втором нажатии буква удаляется, но перемещается еще на одну ячейку назад. Так что теперь, если я нажму букву, она перепишет не ту букву. Я опубликую изображение, чтобы показать вам, что происходит.


Хорошо, код:

Код: Выделить всё

const handleKeyPress = (e) => {
const letra = e.key.toUpperCase();

if ('ABCDEFGHIJKLMNÑOPQRSTUVWXYZ'.includes(letra) && chosenWord.length !== 5) {
const currentCell = cellsRef.current[`${row}${cell}`]; // Chosing the cell
setChosenWord(chosenWord + letra);  // Setting the word
console.log(chosenWord);

currentCell.innerHTML = letra;
currentCell.classList.remove('current_cell');

/* Modifying the cell to be selected */
cell !== 4 ? setCell(cell + 1) : setCell(0);
cell !== 4 ? setRow(row) : setRow(row + 1);

}

if (e.key === 'Backspace') {
const backChosenWord = chosenWord.slice(0, -1)
setChosenWord(backChosenWord);

/* Setting the new current cell */
cell !== 0 ? setCell(cell - 1) : setCell(cell);
const newCell = cellsRef.current[`${row}${cell}`];
newCell.innerHTML = '';

}
}

useEffect(() => {
window.addEventListener('keydown', handleKeyPress)

return () => {
window.removeEventListener('keydown', handleKeyPress)
}
}, [handleKeyPress])

row, cell, chosenWord и searchedWord являются переменными useState. Есть еще код, но он не имеет отношения к проблеме.
Есть идеи, почему это происходит?
В качестве бонусного вопроса есть еще одна вещь, которую я не понимаю (и она может быть связана с этим). Когда я впервые нажимаю букву (скажем, «S»), журнал пуст. Когда я нажимаю вторую букву («E»), вместо SE пишется «S». В третий раз (скажем «А») регистрируется SE вместо SEA. И так далее. То же самое и с бэкспейсом. Есть идеи?

Подробнее здесь: https://stackoverflow.com/questions/797 ... y-on-react