_this3は関数ではありません（リアクション）

Question

私はユーザーが2回入力し、それらの間の秒数をカウントダウンする単純なカウントダウンコンポーネントを持っています。開始、停止、リセットの作業。

以下

TypeError: _this3.start is not a function

> 108 | <button onClick={(e) => this.start()}>Start</button>

は私のコードです：

import React, { Component } from 'react'; 
import './App.css'; 

class App extends Component { 
    constructor(){ 
    super(); 
    this.start = this.start.bind(this); 
    this.toTimestamp = this.toTimestamp.bind(this); 
    this.getDifference = this.getDifference.bind(this); 

    this.state = { 
     input1: '', 
     input2: '', 
     countdown: null 
    } 
    } 


input1ContentChange(e){ 
    const text = e.target.value; 
    this.setState(()=>{ 
    return {input1: text}; 
    }) 
} 

input2ContentChange(e){ 
    const text = e.target.value; 
    this.setState(()=>{ 
    return {input2: text}; 
    }) 
} 


toTimestamp(input){ 
    let time = input.split(':'); 
    let seconds = ((+time[0]) * 60 * 60) + ((+time[1]) * 60) + (+time[2]); 

    return seconds; 
} 

getDifference(input1, input2){ 
    let difference = (this.toTimestamp(input2))- (this.toTimestamp(input1)); 

    if(this.toTimestamp(input2) < this.toTimestamp(input1)){ 
    alert("please input a later time in Time 2"); 
    } 

    this.setState({ 
    countdown: difference 
    }) 
} 


start() { 
    if(this.state.input1 === '' && this.state.input2 === ''){ 
    alert('please choose 2 times'); 
    } 
    this.getDifference(this.state.input1, this.state.input2); 
    this.start = setInterval((e) => { 
    this.setState((prevState) => { 
     return {countdown: prevState.countdown - 1}; 
    }); 
     if(this.state.countdown <= 0){ 
     clearInterval(this.start); 
     } 
    }, 1000); 

} 

stop(){ 
    clearInterval(this.start); 
} 

reset(){ 
    clearInterval(this.start); 
    this.setState((prevState) => { 
    return {countdown: null, input1: '', input2:''} 
    }) 
} 

    render() { 
    return (
     <div className="App"> 
     <h1>Countdown Timer</h1> 
     <p>Please choose two different times below</p> 
      <div className="input1"> 
       <label> 
       Time 1: 
       <input type="time" 
        step="1" 
        min= "12:00" 
        max= "18:00" 
        value={this.state.input1} 
        onChange={(e)=> this.input1ContentChange(e)}/> 
       </label> 
      </div> 
      <div className="input2"> 
       <label> 
       Time 2: 
       <input type="time" 
        step="1" 
        min="12:00" 
        max="18:00" 
        value={this.state.input2} 
        onChange={(e)=> this.input2ContentChange(e)}/> 
       </label> 
      </div> 
      <button onClick={(e) => this.start()}>Start</button> 
      <button onClick={(e) => this.stop()}>Stop</button> 
      <button onClick={(e) => this.reset()}>Reset</button> 
      <h3>{this.state.countdown}</h3> 
     </div> 
    ); 
    } 
} 

export default App; 

私はカウントダウンと入力（ページを更新せずに）二つの新しい時代をリセットしたときに、私はこのエラーでヒットしています、を除いて

カウントダウンを再開する開始機能でエラーが発生しています。 React拡張機能を使用してクロームツールをチェックインすると、状態は正常に管理されます。これは "これ"が失われているようです。

Answer 1

あなたはクラス機能を変更しています。アプリの負荷は、あなたのクラスがstartメソッドを持っていますが、そのメソッド内であなたが行うと：

this.start = setInterval(...) 

setIntervalは、関数を返しますが、あなたは間隔をクリアするために、後で使用することができますidしません。関数が返されたとしても、実行時にクラスメソッドを変更したくないと思うかもしれません。

私は別の変数名を使用することをお勧めし

：

this.intervalId = setInterval(...)