Покажите оставленные подчеркивания по одному в конце игры Hangman TypeScript

Question

Когда игра заканчивается, я пытаюсь заменить подчеркивания буквами, которые они пропустили по одной, используя setTimeout. Эта функция меняет подчеркивание на правильную букву, но при следующем отображении возвращает букву обратно к подчеркиванию и повторяет этот процесс до конца, где отображается только последняя отсутствующая буква. Мне нужны все буквы, чтобы полностью поменять state.underscores, который представляет собой массив строк.

state.missingIndex - это массив чисел; отсутствующие буквенные индексы

слово - это полное слово, которое угадывает игрок

с использованием ловушки useReducer для изменения состояния

реагирование на ловушки и набор текста

  const displayMissingLetters = () => {
    let wrongWord: string[] = [];

    state.losses.missingIndex.forEach((num, index) => {
      setTimeout(() => {
        wrongWord = state.underscores
          .map((alpha: string, i: number) =>
            alpha === "_" && word[i] === word[num] ? word[num] : alpha
          );

        dispatch({ type: "SET_UNDERSCORES", underscores: wrongWord });

      }, index * 300);
    });
  }

This вот как это выглядит прямо сейчас:

Вот как неправильно выглядит консоль:

Answer 1

Проблема в том, что когда срабатывает функция тайм-аута, она имеет устаревшую копию состояния, установленную при первом планировании всех тайм-аутов.

Похоже, что здесь вы используете редукторы, поэтому самый простой дело было бы справиться с этим в редукторе. Редукторы получают текущее состояние, когда они начинают работать, поэтому они никогда не должны иметь старое / устаревшее состояние.

setTimeout(() => {
  dispatch({ type: "REVEAL_LETTER", index: num });
}, index * 300)

Затем переместите лог c, который заменяет подчеркивание буквой, и сохраняют обратно в состояние, к редуктору.