我一直在搞這個編碼挑戰，但現在我有點卡住了。我不確定我是否理解挑戰。
這是挑戰 您的目標是創建一個頁面，顯示酒店及其房間的串列。
查詢以下API：
https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG
這將回傳帶有 Id 的酒店串列。Id 可用于查詢此查詢的房間型別：
https://obmng.dbm.guestline.net/api/roomRates/OBMNG/[hotelId]例如，https://obmng.dbm.guestline.net/api/roomRates/OBMNG/OBMNG1
我該怎么辦？我讀了一些關于 Promise.all 的內容——這是我在這里需要的嗎？
我有這樣的事情，但不確定下一步
async componentDidMount () {
const url = "https://obmng.dbm.guestline.net/api/roomRates/OBMNG/OBMNG1";
const urlSecond = "https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG";
const response = await fetch(url);
const response = await fetch (urlSecond);
const data = await response.json();
const data = await response.json();
this.setState({hotel:data.rooms[0], loading: false});
this.setState({hotel:data, loading:false});
console.log(data.rooms[0]);
console.log(data);
讓我知道我應該做什么 - 謝謝
uj5u.com熱心網友回復：
您要做的是首先獲取酒店，然后為每個酒店發送一個房間資訊請求。你會看到我們最終會得到一個最終的物件陣列。陣列中的每個索引都有一個hotel包含酒店資訊的rooms鍵，然后是一個包含該酒店所有房間資訊的鍵。
這是一個有效的代碼和框。
import { useEffect, useState } from 'react'
export default function App() {
const [hotelRooms, setHotelRooms] = useState([])
const fetchHotels = async () => {
const res = await fetch('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG')
const hotels = await res.json()
const hotelRooms = []
for(const hotel of hotels) {
const res = await fetch(`https://obmng.dbm.guestline.net/api/roomRates/OBMNG/${hotel.id}`)
const info = await res.json()
hotelRooms.push({ hotel, rooms: info.rooms })
}
setHotelRooms(hotelRooms)
}
useEffect(() => {
fetchHotels()
}, [])
return (
<div className="App">
{
hotelRooms.map(h => (
<div>
<h2>{h.hotel.name}</h2>
<p>{h.hotel.description}</p>
<p style={{ fontWeight: 'bold' }}>Rooms:</p>
{
h.rooms.map(room => (
<div>
<div>- {room.name}</div>
</div>
))
}
</div>
))
}
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/321696.html
標籤：javascript 反应 接口