前提・実現したいこと
https://reactjs.org/docs/state-and-lifecycle.html
こちらのサイトを見て勉強しているときに、不思議に感じたことがあったので質問しました。
該当のソースコード
こちらのサイトに書かれている下のソースコードで、componentDidMount
メソッドのsetIntervalの中身を
this.timerID = setInterval(this.tick, 1000);
としたときに動かない理由はなんでしょうか?
私としては、このようにすればメソッドの内容が展開され、うまく動くだろうと思ったのですが...。
javascript
1class Clock extends React.Component { 2 constructor(props) { 3 super(props); 4 this.state = {date: new Date()}; 5 } 6 7 componentDidMount() { 8 this.timerID = setInterval( 9 () => this.tick(), 10 1000 11 ); 12 } 13 14 componentWillUnmount() { 15 clearInterval(this.timerID); 16 } 17 18 tick() { 19 this.setState({ 20 date: new Date() 21 }); 22 } 23 24 render() { 25 return ( 26 <div> 27 <h1>Hello, world!</h1> 28 <h2>It is {this.state.date.toLocaleTimeString()}.</h2> 29 </div> 30 ); 31 } 32} 33 34ReactDOM.render( 35 <Clock />, 36 document.getElementById('root') 37);
補足情報(FW/ツールのバージョンなど)
React, ReactDOM最新バージョン。
ご教授、よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー