reactjs setInterval無法按預期工作

Question

我是新來的反應猶太人。

我想把時間花在我的網頁上。 但是，當我使用setInterval ，時間不起作用。 只是在頁面加載時停止。

我正在使用React.createClass：

var MainContent = React.createClass({

  getInitialState: function(){
    return {waktu: new Date().toLocaleTimeString()}
  },

 componentDidMount: function(){
   setInterval(this.tick, 1000)
 }, 

 tick: function(){
    this.setState({waktu: this.state.waktu})
 },

  render: function(){

    return(
      <div className="container">
        <div className="panel panel-success">
          <div className="panel-heading">
            <h3 className="panel-title">Panel title</h3>
          </div>
          <div className="panel-body">
            Panel content &nbsp;
            {this.state.waktu}
          </div>
        </div>
      </div>
    );
  }
});

Answer 1

你需要將它綁定到你的setTimeOut函數，你可以在這里看到更多關於它的信息： https ： //facebook.github.io/react/docs/handling-events.html

setInterval(this.tick, 1000).bind(this)

並且為了更改您的日期，只需在您的州申請新的日期：

this.setState({waktu: new Date()})

Answer 2

將初始時間代碼拉入單獨的函數，並在設置setState時調用它。

function getTime() {
  return new Date().toLocaleTimeString()
}

getInitialState: function() {
  return { waktu: getTime() }
}

tick: function() {
  this.setState({ waktu: getTime() })
}

您還需要在setInterval中綁定該函數。

Answer 3

在每個間隔后將狀態設置為自己的值不會有幫助。 您需要設置為當前時間

 var MainContent = React.createClass({ getInitialState: function(){ return {waktu: new Date().toLocaleTimeString()} }, componentDidMount: function(){ setInterval(this.tick, 1000) }, currentTime: function () { return new Date().toLocaleTimeString(); }, tick: function(){ this.setState({waktu: this.currentTime()}) }, render: function(){ return( <div className="container"> <div className="panel panel-success"> <div className="panel-heading"> <h3 className="panel-title">Panel title</h3> </div> <div className="panel-body"> Panel content &nbsp; {this.state.waktu} </div> </div> </div> ); } }); ReactDOM.render(<MainContent/>, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>