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;