[解決済み] ReactアプリのsetInterval

質問

Reactはまだかなり初心者なのですが、少しずつ削っていって、行き詰まったことが出てきました。

私はReactで"timer"コンポーネントを作ろうとしていますが、正直なところ、このやり方が正しいのか（あるいは効率的なのか）、よくわかりません。以下のコードでは、オブジェクトを返すように状態を設定しました。 { currentCount: 10 } と弄り回しています。 componentDidMount , componentWillUnmount および render で、10→9のカウントダウンしかできない。

2つに分けて質問します。私は何を間違えているのでしょうか？また、setTimeoutを使用する際に、より効率的な方法はありますか？ componentDidMount &です。 componentWillUnmount )?

よろしくお願いします。

import React from 'react';

var Clock = React.createClass({

  getInitialState: function() {
    return { currentCount: 10 };
  },

  componentDidMount: function() {
    this.countdown = setInterval(this.timer, 1000);
  },

  componentWillUnmount: function() {
    clearInterval(this.countdown);
  },

  timer: function() {
    this.setState({ currentCount: 10 });
  },

  render: function() {
    var displayCount = this.state.currentCount--;
    return (
      <section>
        {displayCount}
      </section>
    );
  }

});

module.exports = Clock;

解決方法は？

あなたのコードには4つの問題があります。

• timerメソッドで、現在のカウントを常に10に設定しています。
• renderメソッドで状態を更新しようとした場合
• を使用しない。 setState メソッドで実際に状態を変更します。
• ステートにintervalIdを保存していない

直してみましょう。

componentDidMount: function() {
   var intervalId = setInterval(this.timer, 1000);
   // store intervalId in the state so it can be accessed later:
   this.setState({intervalId: intervalId});
},

componentWillUnmount: function() {
   // use intervalId from the state to clear the interval
   clearInterval(this.state.intervalId);
},

timer: function() {
   // setState method is used to update the state
   this.setState({ currentCount: this.state.currentCount -1 });
},

render: function() {
    // You do not need to decrease the value here
    return (
      <section>
       {this.state.currentCount}
      </section>
    );
}

この場合、タイマーは10から-Nまで減少することになります。もし、タイマーが0まで減少するようにしたい場合は、少し修正したものを使用します。

timer: function() {
   var newCount = this.state.currentCount - 1;
   if(newCount >= 0) { 
       this.setState({ currentCount: newCount });
   } else {
       clearInterval(this.state.intervalId);
   }
},