Почему цикл for считает один и тот же индекс дважды?

у меня странная проблема с React и функцией тайм-аута. По какой-то причине я хочу, чтобы к букве useEffect добавлялась строка. Итак, я написал этот код:

const [placeholder, setPlaceholder] = useState < string > ('')

useEffect(() => {
    const str = "How may I help you today?";
    const letters = Array.from(str);

    const addLetterWithDelay = (index: number) => {
        if (index < letters.length) {
            setTimeout(() => {
                setPlaceholder(prevPlaceholder => prevPlaceholder + letters[index]);
                addLetterWithDelay(index + 1);
            }, 1000); // Delay of 1 second
        }
    };

    addLetterWithDelay(0); // Start adding letters from index 0
}, []);

Проблема в том, что буква устанавливается дважды Таким образом, вывод будет таким: HHooww mmaayy II hheellpp yyououu ttooddaayy?? даже если я проверю с помощью оператора, совпадает ли последний символ заполнителя с буквами [индекс] или нет, он все равно печатает, что это не то же самое, и продолжает выполнение

Связанное Создание эффекта пишущей машинки в React (с использованием JS)

— 07.04.2024 06:25

по сути, ваша функция обновления состояния prevPlaceholder => prevPlaceholder + letters[index] не является чистой функцией. Он должен быть чистым, чтобы всегда возвращать одно и то же значение при одних и тех же входных данных.

— 07.04.2024 06:35

reactjs for-loop duplicates

07.04.2024 05:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Измените свой useEffect на:

 useEffect(() => {
    const str = "How may I help you today?";
    const letters = Array.from(str);
    let timerId: NodeJS.Timeout; // Declare a variable to hold the timeout ID

    const addLetterWithDelay = (index: number) => {
        if (index < letters.length) {
            timerId = setTimeout(() => {
                setPlaceholder(prevPlaceholder => prevPlaceholder + letters[index]);
                addLetterWithDelay(index + 1);
            }, 1000); // Delay of 1 second
        }
    };

    addLetterWithDelay(0); // Start adding letters from index 0

    return () => clearTimeout(timerId); // Clear the timeout when the component is unmounted or the useEffect hook re-runs
}, []);

Таким образом, если ваш компонент выполняет повторную визуализацию и перехватчик useEffect вызывается снова, текущий тайм-аут очищается и метод addLetterWithDelay завершается.

07.04.2024 05:10

Другие вопросы по теме

Java: формула равномерного распределения строк в зависимости от количества добавленных строк в 4 квадрантах

Быстрое вычисление опорных точек по ломаным линиям в MATLAB

Можете ли вы выполнить операцию над каждой строкой кадра данных, используя Apply?

Цикл для установки Interior.ColorIndex, если ячейка не пуста

Как использовать цикл for внутри метода с параметром массива?

Как напечатать переменную из ассоциативного массива и многострочную строку из цикла цикла в heredoc

Как добавить цикл «for» в VHDL

Почему следующий код C входит в бесконечный цикл?

Лямбда-функция Python работает в Colab, но не в цикле Jupyter for

Распечатать таблицы данных DT для рендеринга цикла в html

Почему цикл for считает один и тот же индекс дважды?

Ответы 1

Другие вопросы по теме

Похожие вопросы