在 Hangman TypeScript 游戏结束时一次显示剩余的下划线

Question

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

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

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

使用 useReducer 钩子改变状态

React 钩子和 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);
    });
  }

这是目前的样子：

wrongWord 在控制台中是这样的：

Answer 1

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

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

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

然后将用字母替换下划线并将其保存回 state 的逻辑移至 reducer。

在 Hangman TypeScript 游戏结束时一次显示剩余的下划线

Reveal left over underscores one at a time at end of Hangman TypeScript game

javascript

settimeout

2d-games

typescript

reactjs