React 変数の値が異なってしまう。

Question

### 前提・実現したいこと
タイピングゲームを作っています。

returnの中のUntyped変数の値とreturnの外の変数の値を等しいものにしたい。

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

returnの中のunTypedでブラウザに表示される、値とreturnの直前のConsole.logとでは、値が異なったものになってします。

該当のソースコード

import React from 'react';

const DisplayRandomCharacter = (props) => {
  const wordsList = props.wordsList;
  const currentWord = wordsList[Math.floor(Math.random() * wordsList.length)];
  console.log(currentWord)
  let typed = '';
  let unTyped = currentWord;
  console.log(currentWord.slice(1))
  let currentChracter = unTyped.charAt(0); 
  console.log(unTyped.charAt(0));

  window.addEventListener('keydown', (event) => {
    if (event.key === currentChracter) {
      console.log(unTyped)
      typed += currentChracter;
      unTyped = currentWord.slice(1);
      console.log(currentChracter);
      currentChracter = unTyped.charAt(0)
      console.log(unTyped.charAt(0))
    }
  })
  console.log(unTyped)
  return(
    <p className={props.className}><span className="typed">{typed}</span><span className="unTyped">{unTyped}</span></p>
  )
}

export default DisplayRandomCharacter;

試したこと

DisplayRandomChracterは、関数コンポーネントです

Answer 1

returnの中のUntyped変数の値とreturnの外の変数の値を等しいものにしたい。

無理です。

そもそも、window.addEventListener内の関数はイベント発生時に実行されるので、外側のconsole.log(unTyped)のほうが先に実行されます。あとからイベントハンドラで影響を与えることはありません。

（状態に応じて変わる値を管理したいなら、useStateでReact内での管理を行う必要があります）

Comments

[Patao150205]

let untyped ＝ currentWordで、1ヶ所でしか代入していない。
(let untyped ＝ currentWordの直後からreturnの直前のconsoleの直前までコメントアウトしてます。)
Stateをセットして状態を変えて再レンダリングしたわけでもない。でもreturnの内外で全く別の単語が入ってしまう。なぜMathrandomでランダムで、単語が生成されてしてしまっているのでしょうか？どうしてこうなるのかさっぱり分かりません。

意図しないunTypedの値の生成はどのように起こっているのかを教えて頂きたいです。

[Patao150205]

コメントアウトしたものを削除したソースコードです。

import React from 'react';

const DisplayRandomCharacter = (props) => {
const wordsList = props.wordsList;
const currentWord = wordsList[Math.floor(Math.random() * wordsList.length)];
console.log(currentWord)
let typed = '';
let unTyped = currentWord;
console.log(unTyped)
return(
<p className={props.className}><span className="typed">{typed}</span><span className="unTyped">{unTyped}</span></p>
)
}

export default DisplayRandomCharacter;

[maisumakun]

> 意図しないunTypedの値の生成はどのように起こっているのかを教えて頂きたいです。

残念ながら、本来の「意図」のほうがわからないです。

[maisumakun]

> Stateをセットして状態を変えて再レンダリングしたわけでもない。でもreturnの内外で全く別の単語が入ってしまう。

コメントアウトした状態での「returnの内外」は、何を指していますか？

[Patao150205]

まず、実現したいこととしては、
const currentWord = wordsList[Math.floor(Math.random() * wordsList.length)];で配列からランダムに取り出した単語を変数に入れて、タイプをしていない単語としてそのまま、unTypedの変数に代入しています。その、Untypedの変数をブラウザでこれから打つべき単語として表示したいと思っています。

なので、ここでの意図しないとは、本来,returnの直前のconsole.logと<p>タグとしてブラウザに、出力される単語は、全く同じ単語を表示するはずですが、なぜか、コンソールで表示された値とブラウザに表示された単語が異なり、同じでなければいけない単語が異なり、全く別に意図しない単語が生成されていることを意味しています。

よろしければ、画像の方も添付しましたので、ご覧ください。

[maisumakun]

エラーメッセージとして「Each child in a list should have a unique "key" prop」と出ていますが、このコンポーネントをどのように使っているのでしょうか？

親コンポーネントが存在する場合、親の都合で再描画が走ることがありえます。

[Patao150205]

切り抜きました
<SelectNumBox key="minutes" className="time-selector" firstNum={0} lastNum={6} riseNum={1}></SelectNumBox>

<SelectNumBox key="seconds" className="time-selector" firstNum={0} lastNum={60} riseNum={5}></SelectNumBox>

Consoleは、この値のkeyがuniqueではないと怒っているようですね。keyを設定しているのですが....
keyは、パフォーマンスが落ちるだけで、特に影響がないと思っていて放置していましたが、やっぱなんかしら影響あるのですね。

コンポーネント構成です。
App--|
FirstScreen--|
selectNumbox key="minutes"
selectNumbox key="seconds"

App--|
Timer
DisplayRandomCharacter

Appより下は条件分岐でページごとに付け替えています。

[maisumakun]

質問にあるconsole.logの数に対して、出力されるものが少ないように見受けられます。

[Patao150205]

コメントアウトしているので、本来表示されるべき２つのConsole.logはブラウザのConsoleで２つ表示されているので、出力される値の数は正しいかと。

[Patao150205]

keyのエラーは解消できました。しかし、値が異なってしまうのは、なおりませんでした。

[maisumakun]

currentWordが「再描画のたびにどれが選ばれるかわからない」という構造自体が、おそらく適切なものではありませんので、useStateを使って一度初期化した後は同じ値を保持するようにしたほうがいいでしょう。