在 Hangman TypeScript 游戏结束时，一次显示一个下划线

Question

游戏结束后，我尝试使用 setTimeout 将下划线替换为他们一次错过的字母。 此函数将下划线与正确的字母交换，但是在接下来的渲染中将字母放回下划线并重复此过程，直到只显示最后一个丢失的字母为止。 我需要所有字母来完全换出 state.underscores，它是一个字符串数组。

state.missingIndex 是一个数字数组； 缺少字母索引

word 是玩家猜测的完整单词

使用 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);
    });
  }

这是它现在的样子：

这是 wrongWord 在控制台中的样子：

Answer 1

问题是当超时函数触发时，它有一个陈旧的状态副本，在所有超时第一次安排时设置。

看起来您在这里使用了减速器，所以最简单的方法是在减速器中处理它。 Reducers 在开始运行时获得当前状态，因此它们不应该有旧的/过时的状态。

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

然后将用字母替换下划线的逻辑移动到reducer，并将其保存回状态。