Цикл внутри SetInterval не вызывает вторую итерацию ⇐ Javascript

[Anonymous]

У меня есть крюк с использованием useTypewRiter, который, кажется, пропускает вторую итерацию, так как я никогда не регистрируется как 1. Почему код не работает? Вывод должен быть Howdy , а не hwdy .
Вот полный код:

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

const { useState, useEffect } = React;

const useTypewriter = (text, speed = 50) => {
const [displayText, setDisplayText] = useState('');

useEffect(() => {
let i = 0;
const typingInterval = setInterval(() => {
console.log('text.length: ', text.length);
if (i < text.length) {
// problem: i is not 1 on the second iteration
setDisplayText((prevText) => {
console.log('prevText: ', prevText);
console.log(i, 'text.charAt(i): ', text.charAt(i));

return prevText + text.charAt(i);
});
i++;
} else {
clearInterval(typingInterval);
}
}, speed);

return () => {
clearInterval(typingInterval);
};
}, [text, speed]);

return displayText;
};

function App(props) {
const displayText = useTypewriter('howdy', 200);

return (

{displayText}

);
}

ReactDOM.createRoot(
document.getElementById("root")
).render(

);< /code>

Подробнее здесь: https://stackoverflow.com/questions/793 ... interation