Не понимаю почему в setInetrval внутри useEffect добавляет undefined к результирующей строке

Рейтинг: 0Ответов: 1Опубликовано: 14.02.2023

Не понимаю почему 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)
reactjs
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

На 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