reacthooksを利用して楽天APIで簡単ホテル検索

apiを利用したことがなかったので、勉強のために実装したので備忘録

開発環境
macOSX Catalina　バージョン10.15.7
VisualStudioCode

ディズニーという文字が入ったホテルのリストを取得して、ホテル名とアクセスを表示する
Promiseオブジェクトが
- awaitとすることでjsonとしてデータ取得ができる。
- asyncにしている関数内ではないとawaitは使用できない
- asyncは関数の定義に含めなければならない（非同期処理の指定だから）
- useEffect内で関数を実行することにより、任意の関数内でasyncを実行できる

上記の情報を考慮して記述

import './App.css';
import axios from 'axios';
import { useEffect, useState } from 'react';

const getHotels = () => {
  const q = "ディズニー"
  return axios.get(`https://app.rakuten.co.jp/services/api/Travel/KeywordHotelSearch/XXXXXXXXXXXXXX?&applicationId=XXXXXXXXXXXXXXXXX&format=json&keyword=${q}`)
}

const App =()=> {
  const [hotels, setHotels] = useState([])


  useEffect(async () => {
    const res = await getHotels()
    const hotels = res.data
    setHotels(hotels.hotels)
  }, [])

  // mapがうまくいかない仮説：配列になってない
  console.log(hotels)
  // console.log(hotels[0].hotel[0])
  return (
    <div className="App">
      {hotels.length > 1 && 
      // mapする時にkeyidを入れることで、後から指定してスタイル変更などができなくなる
        hotels.map((hotel, id)=>{
          console.log(hotel.hotel[0])
          return(
            <div className="hotel" key={id}>
              <div className="hotel-name">{hotel.hotel[0].hotelBasicInfo["hotelName"]}</div>
              <div className="hotel-access">{hotel.hotel[0].hotelBasicInfo["access"]}</div>
            </div>
          )
        })
      }
    </div>
  );
}

export default App;