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>