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

Question

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

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

单词是玩家猜测的完整单词

使用 useReducer 钩子(Hook)来改变状态

React hooks 和 Typescript

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

这就是现在的样子:

这就是错误词在控制台中的样子:

Answer 1

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

看起来您在这里使用了 reducer ，所以最简单的事情就是在 reducer 中处理这个问题。 reducer 在开始运行时会获取当前状态，因此它们不应该具有旧的/过时的状态。

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

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