React コンポーネント内の変数の取り扱い

Question

Reactを勉強し始めて１週間目。独学でビンゴゲームの製作を試みています。

以下のようなプログラムでstartボタンを押したら0~99の間の数字をランダムに画面に表示、二回目にユーザーがボタンを押すとルーレットが停止し、その時画面に表示されている数字をそのラウンドで選ばれた数字として登録、また以降のラウンドで選ばれないようにしたいです。

作り始めた際には正常に操作することのできていた"yetNumber"という配列が、プログラムを組んでいくうちに以下のエラーメッセージとともに操作できなくなってしまいました。

class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: 0,
                    newNumber: 0,
                    btnValue: 'true'
                  };
      this.yetNumber = Array.from({length: 100}, (_, i) => i); //default arrary for playing game
      this.alreadyNumber = []; // to rememmber the numbers that have chozen already
    }

    removeNum = (num) =>{
      this.yetNumber.splice(num, 1); //delete the number that showed on display
      this.alreadyNumber.push(num); //make a array with numbers that showed on display
    }

    start = (range, intervalId) => { 

        intervalId = setInterval(()=>{ //repeat till player stop
          let i = Math.floor( Math.random() * range); // make a index number randamly 
          this.setState({value: this.yetNumber[i]}); // show up the number
          },50
        );
    }

    roulette(e) {
      let text = e.target.innnerHTML; //change the text either start or stop
      if(text === 'START'){
        text= 'STOP'
      }else{
        text= 'START'
      };

      let range = this.yetNumber.length +1; //determine currently length of the array
      let intervalId = null; // for repeat function

      if(this.btnValue === 'true'){
        this.setState({btnValue: 'false'}) // so that program can go to else at second time
        this.start(range, intervalId);
      }else{
        clearInterval(this.state.intervalId); // stop the start function
        this.setState({newNumber: this.state.value});
        this.removeNum(this.state.value);
        intervalId = null;
        this.setState({btnValue: 'true'})
      }

    }

  render() {

    return (
      <div className="app">
        <div className="displayArea">
          {this.state.value}
        </div>
        <div className="buttonArea">
          <button type="button" onClick={this.roulette}>
            START
          </button>

以下がchromeで実行した際のエラーメッセージです。

App.js:40 Uncaught TypeError: Cannot read property 'yetNumber' of undefined

roulette関数を書き始める前はthis.yetNumberでconsole.log等アクセスすることができていました。

Comments

[p19ljk]

回答とは関係ないですが、記述方法が古くないですかね？
せっかく勉強するのであれば新しいバージョンで勉強したほうが良いですよ！
関係ないコメント失礼しました。

Answer 1

rouletteの定義を、roulette = e => { //以下略の形にしてください。

ふつうにメソッドを定義した上でonClick={this.roulette}のようにイベントハンドラとして渡すと、thisが正しく対応しなくなります。アロー関数で作ったメソッドは、thisが作った時点で固定されます。

Comments

[退会済みユーザー]

解答ありがとうございます。
上記のように変更してみたのですが、変更するとe.target.propertyが使えなくなってしまったのですがどうするべきなのでしょうか？ちなみにコンソールしたところundefinedになりました

[maisumakun]

innnerHTMLのnが1個多いです。