Одни и те же символы будут напечатаны несколько раз в ответ, но почему? ⇐ Javascript
-
Гость
Одни и те же символы будут напечатаны несколько раз в ответ, но почему?
Я пытаюсь распечатать повышающий текстовый сегмент в реакции, но каждый символ печатается дважды.
Надеюсь, у кого-нибудь из вас есть идеи, я почти схожу с ума и не могу понять, почему это происходит.
С уважением
// index.js импортировать React из «реагировать»; импортировать ReactDOM из «реагировать-дом/клиент»; импортировать тест из «./content/test.js»; функция Корень(){ возвращаться( ) } ReactDOM.createRoot(document.getElementById('root')).render(); // test.js импортировать {useCallback,useEffect,useState} из «реагировать»; экспортировать функцию по умолчанию Test(){ const [outText,setOutText] = useState(''); const drawText = useCallback(text=>{ пусть индекс = 0; пусть textInterval; константный обратный вызов = ()=>{ если (индекс>=text.length-1){ ClearInterval(textInterval); возвращаться; } setOutText(t=>{ если (текст[индекс]==='\n'){ вернуть т+'
'; } еще { вернуть т+текст[индекс]; } }); индекс++; }; textInterval = setInterval (обратный вызов, 20); }); useEffect(()=>{ константный текст = ` здесь написан текст и должен быть распечатан шаг за шагом `.split(''); DrawText (текст); },[]) возвращаться ( ); } каждый символ должен быть добавлен к «outText» один раз, а не дважды, пожалуйста, не используйте решения index%2, это не решит мою проблему
Я пытаюсь распечатать повышающий текстовый сегмент в реакции, но каждый символ печатается дважды.
Надеюсь, у кого-нибудь из вас есть идеи, я почти схожу с ума и не могу понять, почему это происходит.
С уважением
// index.js импортировать React из «реагировать»; импортировать ReactDOM из «реагировать-дом/клиент»; импортировать тест из «./content/test.js»; функция Корень(){ возвращаться( ) } ReactDOM.createRoot(document.getElementById('root')).render(); // test.js импортировать {useCallback,useEffect,useState} из «реагировать»; экспортировать функцию по умолчанию Test(){ const [outText,setOutText] = useState(''); const drawText = useCallback(text=>{ пусть индекс = 0; пусть textInterval; константный обратный вызов = ()=>{ если (индекс>=text.length-1){ ClearInterval(textInterval); возвращаться; } setOutText(t=>{ если (текст[индекс]==='\n'){ вернуть т+'
'; } еще { вернуть т+текст[индекс]; } }); индекс++; }; textInterval = setInterval (обратный вызов, 20); }); useEffect(()=>{ константный текст = ` здесь написан текст и должен быть распечатан шаг за шагом `.split(''); DrawText (текст); },[]) возвращаться ( ); } каждый символ должен быть добавлен к «outText» один раз, а не дважды, пожалуйста, не используйте решения index%2, это не решит мою проблему
Мобильная версия