##やりたいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/22 04:53