Q&A
回答ありがとうございます。
上記コードで実行しましたがchromeコンソールには
Inline Babel script:9 Uncaught TypeError: this.setState is not a function
at <anonymous>:23:9
と出ます。
React学習中です。以下秒数表示プログラムを作成しましたが、
不明点があります。
Javascript
1 setInterval(e => { 2 this.setState({now: (new Date()) }) 3 }, 1000)
↑の部分はなぜ
Javascript
1 setInterval( 2 this.setState({now: (new Date()) }) 3 , 1000)
↑ではダメなのでしょうか？------------>①
「e=>」を削ると初期表示後、表示更新がありませんでした。
この部分は何をしている記述でしょうか？----------->②
【プログラム全体】
JSX
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <script src="http://unpkg.com/react@15/dist/react.min.js"></script> 6 <script src="http://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> 7 <!--<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>--> 8 <script src="http://unpkg.com/babel-standalone@6/babel.min.js"></script> 9 <!--<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>--> 10</head> 11<body> 12 <div id="root"></div> 13 <script type="text/babel"> 14 class SClock extends React.Component{ 15 constructor (props){ 16 super(props) 17 this.state = { 18 now: (new Date()) 19 } 20 setInterval(e => { 21 this.setState({now: (new Date()) }) 22 }, 1000) 23 } 24 25 render(){ 26 const now = this.state.now 27 const hh = this.fmt(now.getHours()) 28 const mm = this.fmt(now.getMinutes()) 29 const ss = this.fmt(now.getSeconds()) 30 return (<div>{hh}:{mm}:{ss}</div>) 31 } 32 fmt(v){ 33 const s = "00" + v 34 return s.substr(s.length -2, 2) 35 } 36 } 37 ReactDOM.render(<div><SClock /></div>, document.getElementById('root')) 38 </script> 39</body> 40</html> 41 42
～～～～～～～～～～～～～～～～～～～
javascript
1 setInterval(function(){ 2 this.setState({now: (new Date()) }) 3 }, 1000)
無名関数に変えてもだめでした。アロー関数=無名関数という理解ですが、
これ動作しないのはなぜか。。参照したサイトではこの書き方をしている
ところがありました。
ちなみに、chromeのプロンプトには
Inline Babel script:9 Uncaught TypeError: this.setState is not a function
at <anonymous>:23:9
と出ます。--------------> ③
回答4件
2
本筋とちょっとズレるんですが...
js
1setInterval(e => { 2 this.setState({now: (new Date()) }) 3}, 1000)
これ、関数に引数受け取ってますがなにも渡ってきません。
eが無駄です。
js
1setInterval(() => { 2 this.setState({now: (new Date()) }) 3}, 1000)
別に無駄だからなんだって言われればそれまでですが、必ずundefinedになるeなんていうパラメータがあると紛らわしいです。
ちなみにsetInterval()に渡す関数に引数を渡したいときは
js
1setInterval((param1, param2, ...) => { 2 this.setState({now: (new Date()) }) 3}, 1000, param1, param2, ...)
ですね。
それから、別の方の回答にあるんですが、アロー関数を無名関数に置き換えるとき、thisは別の変数に入れるより、.bind()してあげる方がいいかなと私は思います。
js
1setInterval(function() { 2 this.setState({now: (new Date()) }) 3}.bind(this), 1000)
投稿2018/09/23 13:46
編集2018/09/23 13:47
総合スコア1803
1
javascript
1setInterval(e => { 2 this.setState({now: (new Date()) }) 3}, 1000)
を初心者にもわかりやすく書き換えると、
~~
setInterval(function(e){
this.setState({now: (new Date()) })
}, 1000)
~~
(本題とは関係ありませんが、コメントで指摘されてコードを修正しました。申し訳ない……)
javascript
1var self = this; 2setInterval(function(e){ 3 self.setState({now: (new Date()) }) 4}), 1000) 5
となります。
つまり、処理の結果を渡しているのではなく、関数を渡しているわけです。
そのため、setInterval 関数は、与えられた関数を何度でも実行できます。
投稿2018/09/23 13:00
編集2018/09/23 13:14
総合スコア1086
ごめんなさい、コードをよく見てませんでした。
アロー関数内でのthis と function 内でのthis の扱いの違いが原因です。今から記事編集します。
To: R.Mizukamiさん
アロー関数はthisを束縛しないので、書き換える場合は別途変数に退避して置くなどしないといけないのでは？（追記：コメントが前後してすみません）
おっしゃる通りですね、ありがとうございます。記事編集しました。
var self = this;
setInterval(function(e){
self.setState({now: (new Date()) })
}), 1000)
こちらのコードで正常動作を確認できませんでした。
var self = this;
setInterval(function(e){
self.setState({now: (new Date()) })
}, 1000)
とすることで正常動作を確認できました。
0
自己解決
以下の理解となりました。ありがとうございました。
①setIntervalの第一引数は関数オブジェクトであるべきで、
上のコードでは関数呼び出しになっているから
②アロー関数
③thisの中身が関数内では、クラスインスタンスではなく、関数オブジェクトに
なっているから。
クラスメソッドを使用する場合は、以下で回避可能。
javascript
1var self = this; 2setInterval(function(e){ 3self.setState({now: (new Date()) }) 4}, 1000)
thisはアロー関数内では束縛される？ようで必要に応じて追加調査します。
投稿2018/09/30 09:49
総合スコア223
0
e => {} はアロー関数です。
【アロー関数 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions
投稿2018/09/23 12:29
編集2018/09/23 12:30総合スコア69625
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/30 08:56