外部APIを表示させることができたので定期的に更新する。
またReactのthisを独自関数で使えるようにするメモ。
更新はDOM構築後のcomponentDidMountで設定することにします。
またclearInterval出来るようにIDはstateに保存しておきます。
thisが上書きされないように注意する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import React, { Component } from 'react'; import getXxxApi from "./logic/getXxxApi"; class Main extends Component { constructor(props) { super(props); this.state={ data:[], }; } myupdate = function(){ //インポートした関数もthisが使えないのでバインド //apply,callを使っても同じ動作 getXxxApi.bind(this)(); //引数として渡してもいい getXxxApi(this); } componentDidMount(){ //ID自体は表示に反映させるわけではないのでsetStateでなくていい //独自関数はthisを使えないのでバインドする this.intervalId = setInterval(this.myupdate.bind(this), 10000); } render(){ ... } } |
データ更新の関数はこんな感じ。
Node.jsで使用してたhttpsモジュールがそのまま使えたので利用してます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const https = require ('https'); export default function getXxxApi(_this) { https.get("https://api.xxx.yyy", function(res) { var x=""; res.setEncoding('utf8'); res.on("data", function(chunk) { x+=chunk; }).on("end",function(){ try{ _this.setState({data: JSON.parse(x)}); }catch(e){ console.log(e); } }); }); } |
引数でthisを渡して_thisを使用する方が混乱がないと思う。
バインドした場合は_thisはいらず代わりにthisを使って更新できる。