reactJSで関数内でsetStateをしたい

モバイルフォンなどの傾きを受取りstateに値を渡したいと思ったのですが、エラーが出てつまりました。
this.setStateのthisがwindowオブジェクト内を挿してしまっているというのはなんとなくわかるのですが、この解決法など教えてもらいたいです

発生している問題・エラーメッセージ

TypeError: this.setState is not a function

該当のソースコード

Javascript
1window.addEventListener("deviceorientation", deviceorientationHandler);
2    // ジャイロセンサーの値が変化
3    function deviceorientationHandler(event) {
4      this.setState({
5        pos_a: event.beta,
6        pos_y: event.gamma,
7        pos_z: event.alpha
8      });

karamarimo

2019/01/08 01:40

質問文のコードはどこに置かれているのでしょうか？(例えば componentDidMount)

hfidk

2019/01/08 04:43

componentDidMountです

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

回答1件

ベストアンサー

function () {}で関数を作るとその呼ばれ方によって関数内のthisが指すものが変わってしまいます。

componentDidMount()内のthisを指すようにするにはarrow functionを使います。arrow function内のthisは外のthisと一致します。

js
1componentDidMount () {
2    window.addEventListener("deviceorientation", event => {
3        // ジャイロセンサーの値が変化
4        this.setState({
5            pos_a: event.beta,
6            pos_y: event.gamma,
7            pos_z: event.alpha
8        });
9    });
10}