React入門 - Part6 - apiの呼び出し、値の受け取り(axios等)

目次

axiosをインストール

Part2を参考にプロジェクトを作成しディレクトリをプロジェクトに移動したら下記コマンドを実行します。

npm install axios

那覇市のお天気情報を画面に表示してみる。

https://weather.tsukumijima.net/
で那覇の天気が取得できそうなので、表示してみます。

以下のように実装してください。
ファイル名は、axios-test.tsxとしました。※もちろんpages配下に作成

import React, {useState, useLayoutEffect} from 'react';
import axios from 'axios';

export const AxiosTest: React.FC = () => {
    // 那覇市のお天気データ ※https://weather.tsukumijima.net/参考
    const url = `https://weather.tsukumijima.net/api/forecast/city/471010`;
    // データを保存するやつ
    const [data, setData] = useState([]);

    useLayoutEffect(() => {
        axios.get(url)
            .then(res =>{
                setData(res.data);
            })
    }, []);

    /** レンダー部分 */
    return (
        <>
            {JSON.stringify(data)}
        </>
    );
};

export default AxiosTest;

useStateとかuseLayoutEffectとか出てきましたね。
ここでは、あまり深く考えないで、URLを叩いたらその結果が表示できたくらいの
感じで。
useStateとかuseLayoutEffectは後ほどhooksについてのtipsなどで説明したいと思います。

表示確認

先で学んだように、

yarn dev

して

http://localhost:3000/axios-test

にアクセスすると、

こんな感じで表示されるかと思います。