【React, TypeScript】 文字を１文字ずつ取得したい

Question

現在reactとtypescriptでタイピングアプリを開発中です
ですが、if (e.key === word[location]) の部分でのエラーが解決出来ずに困ってます。

const Typing: React.FunctionComponent<{ list: any }> = ({list}) => {
  const [word, setWord] = useState("")
  let location:number = 0
  const words = list.map((data: any) => (data.text))
  useEffect(() => {
    setWord(words[Math.floor(Math.random() * words.length)])
  }, [])
  console.log(word)
  document.addEventListener('keydown', e => {
    if (e.key === word[location]) {
      location++;
      setWord('_'.repeat(location) + word.substring(location))
      if (location === word.length) {
        location = 0
        setWord(words[Math.floor(Math.random() * words.length)])
      }
    }
  });
  return (
    <>
      <div id="typing">
        <p className="target">{word}</p>
      </div>
    </>
  );
}
export default Typing;

エラー文は、

TypeError: Cannot read property '0' of undefined 

と出力されています。

word[location]がいけないのかと思い
word.charAt(location)なども試してみたのですが同じエラーになってしまいます。

---

listは配列で中にオブジェクトが入ってます
listをmap関数で回して、list.textだけのwordsという配列を作っています

Answer 1

setWord(words[Math.floor(Math.random() * words.length)])とありますが、ここで間違ってundefinedが入っていたりしないでしょうか。

Comments

[maisumakun]

そことは関係ありませんが、document.addEventListenerを直接コンポーネント内に書くと、コンポーネントの描画のたびにイベントがセットされることになります。useEffectによる制御が必要です。

[ktaraw1574]

document.addEventListenerの直下に
if (word === undefined) return
として解決できました！

document.addEventListenerもuseEffectで制御出来るように書き換えます！
ありがとうございます！感謝です！