0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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;
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?