Почему второй персонаж отсутствует, и в моем эффекте печати добавлен неопределенный символ? ⇐ Javascript

[Anonymous]

Я работаю над простой компонентом типирования в React с помощью движения Framer. Вот код для моего компонента TypingText
ThepingText.jsx

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

import { motion } from 'framer-motion';
import React, { useEffect, useState } from 'react';

const TypingText = ({ text, speed = 100 }) => {
const [displayedText, setDisplayedText] = useState('');

useEffect(() => {
if (!text) return;
let i = 0;
const interval = setInterval(() => {
setDisplayedText((prev) => prev + text[i]);
i++;

if (i >= text.length) clearInterval(interval);
}, speed);

return () => clearInterval(interval);
}, [text, speed, setDisplayedText]);

return (
{displayedText}
);
};

export default TypingText;
< /code>
[b] home.jsx[/b]
        

Вывод: h, I Am thulhidundefined
Второй символ ("i") отсутствует.
Неопределенный появляется в конце.
и я изменил код внутри интервала, подобный этому:
и я изменил код внутри интервала:

и изменил код внутри интервала: const char = text;
setDisplayedText((prev) => prev + char);
< /code>
С этим изменением он работает, как и ожидалось. Но теперь я в замешательстве: < /p>
Почему доступ к тексту непосредственно внутри setDisplayedText < /em> вызывает эту проблему? поведение или то, как я запечатлен в государственных обновлениях, было бы очень полезно.

Подробнее здесь: https://stackoverflow.com/questions/795 ... n-my-typin