Reactでカウントアップしたい

##やりたいこと
Reactを使ってカウントアップをしたいです。

##やってみたこと
今から始めるReact入門〜 React の基本というQiitaのチュートリアル記事を一通りやってみて、自分でも頭を使って書いてみようと思い、setInterval()を使ってカウントアップしてみることにしました。

書いたコードは以下の通りです。

html
1<!-- index.html -->
2
3<!DOCTYPE html>
4<html>
5  <head>
6    <meta charset="utf-8">
7    <title>React Tutorials</title>
8  </head>
9  <body>
10    <div id="app"></div>
11    <script src="./client.min.js"></script>
12  </body>
13</html>

javascript
1// client.js
2
3import React from 'react'
4import ReactDOM from 'react-dom'
5import Layout from './pages/Layout'
6
7const app = document.getElementById('app')
8ReactDOM.render(<Layout />, app)

javascript
1// pages/Layout.js
2
3import React from 'react'
4
5export default class Layout extends React.Component {
6  constructor(){
7    super()
8    this.state = {counter: 1}
9  }
10  render() {
11    setInterval(() => {
12      const nextCount = this.state.counter + 1
13      this.setState({counter:nextCount})
14    }, 1000)
15    return <h1>{this.state.counter}</h1>
16  }
17}

##発生した問題
1→2→4→8→16→32
のように、倍に増えていきます。
1秒ごとに+1しているつもりなので、何でそうなるのか理解できません。

自分の力だけでは解決できそうにありません。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

おそらく、renderでsetIntervalしているがために、setInterval自体が時を追うごとに増えていって、1秒あたりに足される数が増えているものと思われます。

「コンポーネントを1回マウントした時に1度だけ実行する処理」は、componentDidMount()に書きましょう。

javascript
1export default class Layout extends React.Component {
2  constructor(){
3    super()
4    this.state = {counter: 1}
5  }
6
7  componentDidMount() {
8    this.timer = setInterval(() => {
9      const nextCount = this.state.counter + 1
10      this.setState({counter:nextCount})
11    }, 1000)
12  }
13
14  // タイマーのクリア
15  componentWillUnmount() {
16    clearInterval(this.timer)
17  }
18
19  render() {
20    return <h1>{this.state.counter}</h1>
21  }
22}