componentWillUnmountでタイマーを停止する

Question

私はReactエクササイズ（自分自身でもクラスでもない）でカウントダウンタイマーを作っていますが、すべてがうまくいきます（メモはいつでも歓迎です）。コンポーネントがアンマウントされた後でも

だから、私はそれをアンマウントで止めさせたいが、それを正しいものにすることはできない。アンマウント時にsetIntervalを停止するためのプロトコルは何ですか？ここに私が持っているものがあります：

class TimerVal extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     timeToGo: 30 
    } 
    } 
    secondsToMMSS(seconds) { 
    //returns "mm:ss" 
    } 
    componentDidMount() { 
    setInterval(
    () => this.setState({ 
     timeToGo: this.state.timeToGo - 1 
     }), 
     1000 
    ) 
    } 
    componentWillUnmount() { 
    () => this.setState({ 
     timeToGo: undefined 
    }) 
    } 
    render() { 
    // styles 
    console.log(this.state) 
    const count = (this.state.timeToGo > 0) ? this.secondsToMMSS(this.state.timeToGo) : "00:00" 
    console.log(count) 
    return(
     <div style={timerStyle}> 
     <span style={timerSpanStyle}> 
      {count} 
     </span> 
     </div> 
    ); 
    } 
} 

Answer 1

いくつかのものがあります。まず、これは何もしていません。

() => this.setState({ 
    timeToGo: undefined 
}) 

あなたはただ無名関数を定義し、何もしません。次に、カウントダウンが停止したときにtimeToGoを未定義に設定しないでください。間隔はちょうど行くつもりです。代わりに、間隔をクリア：

this.interval = setInterval(
() => this.setState({ 
    timeToGo: this.state.timeToGo - 1 
    }), 
    1000 
) 

はその後componentWillUnmountに：

clearInterval(this.interval) 

これはきれいにカウントダウンをクリアします。最後に、カウントダウンが0になったときの間隔をクリアするか、それ以外の場合は実行を継続します。これは、リソースのコスト：それはまた0に達すると

this.interval = setInterval(
() => { 
    if(this.state.timeToGo > 0) { 
     this.setState(prevState => ({ 
     timeToGo: prevState.timeToGo - 1 
     })) 
    } else { 
     clearInterval(this.interval) 
    } 
    }, 
    1000 
) 

これは私がprevStateを使用していることに注意し、間隔をクリアします。 setStateは非同期なので、正しい状態にアクセスしていることが保証されます。