【React】タイピングゲームで遅延実行/setTimeoutを実装したいです。

Question

現在、Reactにて簡単なタイピングゲームを作成しているのですが、遅延実行/setTimeoutの機能を実装しようとしたところエラーが発生し、詰まってしまいました。
お力をお借りできますと幸いです。

前提・実現したいこと

単語の最後の文字を入力して、0.4秒後に次の単語に遷移するようにしたい。

本ゲームでは、未入力の文字は灰色、入力済みの文字は黒色になるよう、cssを書き換えています。
しかし、現状では最後の文字入力が完了した瞬間に、次の単語に遷移してしまうため、最後の文字が黒色（入力完了）となった状態が表示されません。
そこで、遅延実行を導入し、最後の文字を入力して文字が黒色になったあと、0.4秒後に次の単語に遷移するようにしたいと思っています。

発生している問題・エラーメッセージ

下記エラーが発生してしまいます。

TypeError
Cannot set properties of undefined (setting 'className')

eval
/src/App.tsx:84:12
  81 |     wordTransition(number + 1);
  82 |     textSpans[0].className = "current-letter";
  83 |     for (let i = 1; i < text.length; i++) {
> 84 |       textSpans[i].className = " waiting-letters";
     |      ^
  85 |     }
  86 |   }, 400);
  87 | }

なお、単語によっては発生しない場合もあります。
現在、「inu」→「kitsune」という順番で、単語が遷移していくのですが、「inu」のときはエラーが出ず「kitsune」の時にはエラーが出てしまいます。

該当のソースコード

▼Codesandbox
https://codesandbox.io/s/musing-wind-x404d?file=/src/App.tsx

import React, { useState, useEffect, useRef } from "react";
import "./App.scss";

export default function App() {
  //単語データ
  const wordList = [
    "inu",
    "kitsune",
    "ookami",
    "baison",
    "kitsune",
    "usagi",
    "inu",
    "neko",
    "ningen",
    "hitsuji"
  ];

  //ルビ
  const rubiList = [
    "いぬ",
    "きつね",
    "おおかみ",
    "ばいそん",
    "きつね",
    "うさぎ",
    "いぬ",
    "ねこ",
    "にんげん",
    "ひつじ"
  ];

  //漢字
  const answerList = [
    "犬",
    "狐",
    "狼",
    "バイソン",
    "狐",
    "ウサギ",
    "犬",
    "猫",
    "人間",
    "羊"
  ];

  //タイピングに関する部分
  const [number, setNumber] = useState(0);
  const [position, setPosition] = useState(0);

  const text = wordList[number];
  const answer = answerList[number];
  const rubi = rubiList[number];
 
  // 単語の変更
  const wordTransition = (nextNum: number) => {
    setNumber(nextNum);
    setPosition(0);

    console.log(nextNum);
  };

  const handleKey = (e: React.KeyboardEvent<HTMLDivElement>) => {
    // 文字の配列を取得
    let textSpans = document.querySelector("#textbox").children;

    // 入力したキーと現在入力しようとしている文字が一致するとき
    if (e.key === text[position]) {
      // 現在の文字を入力済とする
      textSpans[position].className = "typed-letters";
      textSpans[position].classList.remove("current-letter");

      // まだ入力していない文字があるとき
      if (position <= text.length - 2) {
        // 次の位置へ移動
        textSpans[position + 1].className = "current-letter";
        setPosition(position + 1);

        // 全ての文字を入力し終わったとき
      } else {
        // 今回追加した実行遅延
        setTimeout( function() {
        wordTransition(number + 1);
        textSpans[0].className = "current-letter";
        for (let i = 1; i < text.length; i++) {
          textSpans[i].className = " waiting-letters";
        }
      }, 400 );
      }
      
      // 間違ったキーを入力したとき
    } else {
      textSpans[position].classList.add("typo");
    }
  };

  //入力エリアにフォーカスを当てる
  const searchInput = useRef(null);
  useEffect(() => {
    searchInput.current.focus();
  });

  //戻るボタン
  const backButton = () => {
    wordTransition(number - 1);
    let textSpans = document.querySelector("#textbox").children;
    textSpans[position].className = " waiting-letters";
  };

  return (
    <>
      <div
        ref={searchInput}
        className="App"
        onKeyPress={(e) => handleKey(e)}
        tabIndex={0}
      >
        <h1>
          {/* 問題（漢字） */}
          <ruby>
            {answer}
            <rt>{rubi}</rt>
          </ruby>
        </h1>
        {/* 入力部分 */}
        <div id="textbox">
          <span className="current-letter">{text[0]}</span>
          {text
            .split("")
            .slice(1)
            .map((char, index) => (
              <span className="waiting-letters" key={index}>
                {char}
              </span>
            ))}
        </div>

        {/* 戻るボタン */}
        <button
          onClick={() => {
            backButton();
          }}
        >
          戻る
        </button>
        <p>{number}/10</p>
      </div>
    </>
  );
}

試したこと

海外の記事を参考に、下記のようにsetTimeoutをアロー関数にしたり、bind(this)を使用したのですが、うまくいきませんでした。

 setTimeout(() => {}, 400);

 setTimeout(function() {}.bind(this), 400);

単語によって発生しない場合があることとエラー文から、ページのレンダリングのタイミングと今回の遅延実行による処理でタイミングの齟齬(「inu」の文字数に対しての命令と「kitsune」の文字数に対しての命令が混じっているなど)が起きているのかなと考えています。
しかし、JavascriptやReactの知識が乏しく打ち手が分からないため、何かお分かりの方がいらっしゃいましたら、お力をお借りできますと幸いです。

何卒宜しくお願い致します。

Answer 1

恐らく、textSpansが次の単語になっているからだと思います。なので、classを当てた後に次に進む処理をすると上手く動くかもしれません。

setTimeout( function() {
 textSpans[0].className = "current-letter";
 for (let i = 1; i < text.length; i++) {
   textSpans[i].className = " waiting-letters";
 }
 wordTransition(number + 1);
}, 400 );

Comments

[panda33]

JJ_1123_I様

ご回答いただきありがとうございます！
ご指摘いただいた通り、処理の順番を入れ替えたところエラーもなく、想定していた挙動を実現できました！
お手上げ状態だったため本当に助かりました。
重ねて御礼申し上げます。