Не понимаю почему в setInetrval внутри useEffect добавляет undefined к результирующей строке
Не понимаю почему useEffect, внутри которого запускается setInterval добавляет undefined?
Подозреваю что он добавляет цифру(индекс элемента символа в строке) под конец, но я думаю что я ошибаюсь потому что плохо знаком с js.
const [reception, setReception] = useState('');
const textNumOne = 'text one';
useEffect(() => {
let iText = 0;
const functionText = setInterval(() => {
iText++
setReception(prev => prev + textNumOne[iText])
if (iText >= textNumOne.length) clearInterval(functionText)
},
150
);
}, []);
console.log(reception)
Ответы (1 шт):
Автор решения: SwaD
→ Ссылка
На React 18.2 в codesandbox происходят интересные вещи
А именно, если делать внешний счетчик по отношению к функции изменения состояния, то 2я(индекс 1) итерация пропускается, хотя увеличение счетчика идет по порядку.
Как работает не совсем корректно:
const textNumOne = "123456789";
useEffect(() => {
let iText = 0;
const functionText = setInterval(() => {
setReception((prev) => {
return prev + textNumOne[iText];
});
iText++;
if (iText >= textNumOne.length - 1) clearInterval(functionText);
}, 150);
}, []);
Вывод: 13456789
Мои предложения по реализации данного вывода:
Создать отдельную функцию, в которую передавать индекс элемента для изменения состояния
const textNumOne = "123456789";
useEffect(() => {
let iText = 0;
const incer = (pos) => {
setReception((prev) => {
return prev + textNumOne[pos];
});
};
const functionText = setInterval(() => {
incer(iText);
iText++;
if (iText >= textNumOne.length) clearInterval(functionText);
}, 150);
}, []);
Вывод: 123456789
Изменять счетчик внутри функции изменения состояния
const textNumOne = "123456789";
useEffect(() => {
let iText = 0;
const functionText = setInterval(() => {
setReception((prev) => {
iText++;
return prev + textNumOne[iText - 1];
});
if (iText >= textNumOne.length - 1) clearInterval(functionText);
}, 150);
}, []);
Вывод: 123456789