React使ってSPAを作るよ（7）の続きです。
ちょっとPHPの環境設定でてこずってしまい進みませんでした･･･
こちらのブログを参考に、ローカルでPHPが動く環境を作りlocalhostでアクセスすることによって、ChromeでもJSONファイルにアクセスできるようになりました。
Laravelを導入しようということになったのでディレクトリを整理したりいろいろしてましたが、Reactのやり方は変わらないのでこのまま続けて書いていってしまいます。
今回は、JSON取得部分を梃入れしたのでメモしておきます。
古臭かった$.ajaxの記述を修正する
さて、前回やった$.ajax部分の記述がこうなってました。
//JSONデータ取得
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
$.ajax({
url: 'PHPファイルのパス',
dataType: 'jsonp',
cache: false,
jsonpCallback: 'callback',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error('PHPファイルのパス', status, err.toString());
}.bind(this)
});
},
success/errorの記述はどうも古臭いやり方のようです。
.then()のほうがスッキリする気もしますが、どの状況でどの処理をしてるかわかりやすくしておきたいので、.done().fail()でいきたいと思います。
//JSONデータ取得
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
var t = this;
$.ajax({
url: 'PHPファイルのパス',
dataType: 'json',
cache: false,
}).done(function(data) {
t.setState({data: data});
}).fail(function(xhr, status, err) {
console.error('PHPファイルのパス', status, err.toString());
});
},
これまでは.bind(this)としてthisを掴んでいたんですが、どうやったらいいかわからなかったので変数tにthisを格納してしまい、
t.setState({data: data});
としました。
もっとちゃんとしたやり方あるぞ！という方は、ぜひ教えてください(人∀・)
それから、PHPを通したことでクロスドメインに関しては解決できているので、JSONPとcallbackをやめました。
dataTypeをjsonに戻し、jsonpcallbackは削除。
さらに、PHP側も
echo $_GET['callback'] . "(" . json_encode($res). ")";
こうなっていたのが
echo json_encode($res);
これだけで正常に返るようになりました。
短いですが今回はここまで。
次回、JSXファイルをヘッダやフッタなどコンポーネント別に分割します！