Мобильная версияОдни и те же символы будут напечатаны в React несколько раз, но почему? ⇐ Javascript
-
Гость
Одни и те же символы будут напечатаны в React несколько раз, но почему?
Я пытаюсь распечатать сегмент поднимающего текста в React, но каждый символ печатается дважды.
Надеюсь, у кого-нибудь есть идеи.
index.js
импортировать React из 'реагировать'; импортировать ReactDOM из «реагировать-дом/клиент»; импортировать тест из «./test.js»; функция Корень(){ возвращаться( ) } ReactDOM.createRoot(document.getElementById('root')).render(); test.js
import {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, поскольку они не решат мою проблему.
Я пытаюсь распечатать сегмент поднимающего текста в React, но каждый символ печатается дважды.
Надеюсь, у кого-нибудь есть идеи.
index.js
импортировать React из 'реагировать'; импортировать ReactDOM из «реагировать-дом/клиент»; импортировать тест из «./test.js»; функция Корень(){ возвращаться( ) } ReactDOM.createRoot(document.getElementById('root')).render(); test.js
import {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, поскольку они не решат мою проблему.
