reactjs setInterval無法正常工作

Question

我是新來的reactJS。

我想在我的網頁上附加時間。但是，當我使用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

將您的初始時間代碼放入單獨的功能和打電話，只要你setState。

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

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

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

您還需要綁定您的setInterval函數。

Answer 2

你需要把它綁定到你的setTimeout函數，你可以看到更多在這裏：https://facebook.github.io/react/docs/handling-events.html

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

和更改日期只是將新的日期應用於您的狀態：

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

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>