我對下一步要做什么有點迷茫。我已設法顯示內容，但似乎無法通過單擊對其進行過濾。使用不同的 api 很容易，我遵循了 webdevsimplified 但這我無法解決，我已經無能為力了！
我想要的只是過濾映射的 api。例如，如果我選中 3，它應該只顯示 3 星評級。任何人都可以給我一些建議。
應用程式.js
import { useEffect, useState, useRef } from 'react'
import Header from './components/Header';
import SearchBar from './components/SearchBar';
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">
<Header/>
{
hotelRooms.map(h => (
<div>
<input value={"1"} type="checkbox" onChange={}/>
<input value={"Adults"}type="checkbox" onChange={}/>
<h2> Name: {h.hotel.name}</h2>
<p> Description: {h.hotel.description}</p>
<p> Rating: {h.hotel.starRating}</p>
<p> Postcode: {h.hotel.postcode}</p>
<p> City: {h.hotel.town}</p>
<img src={h.hotel.images}/>
<p style={{ fontWeight: 'bold' }}>Rooms:</p>
{
h.rooms.map(room => (
<div>
<h5>Occupancy</h5>
<div> Adults: {room.occupancy.maxAdults}</div>
<div> Children: {room.occupancy.maxChildren}</div>
<div> Maximum guests: {room.occupancy.maxOverall}</div>
<div> Room type: {room.name}</div>
<img src={room.images}/>
</div>
))
}
</div>
))
}
</div>
);
}
uj5u.com熱心網友回復：
您應該有一個保存過濾屬性的狀態。
const [filter, setFilter] = useState({ ratings: ["1", "2", "3", "4", "5"] });
當您顯示復選框時，為其添加名稱和相應的值。請記住，當您.map在渲染中使用時，為 out most 標簽添加一個唯一鍵。
<div>
{["1", "2", "3", "4", "5"].map((star) => (
<div key={"input-" star}>
<input
id={"rated" star}
value={star}
name="ratings"
type="checkbox"
checked={filter.ratings.includes(star)}
onChange={handleRatingFilter}
/>
<label htmlFor={"rated" star}>Rated {star} star</label>
</div>
))}
</div>
現在在onChange處理程式中，根據復選框更新狀態：
const handleRatingFilter = (e) => {
if (e.target.checked) {
// adding value
const temp = [...filter.ratings];
temp.push(e.target.value);
setFilter({ ...filter, ratings: temp });
} else {
// removing value
setFilter({
...filter,
ratings: [...filter.ratings.filter((v) => v !== e.target.value)]
});
}
};
最后，當您使用.mapon時，hotelRooms您可以在映射之前過濾串列。
{hotelRooms
.filter((h) => filter.ratings.includes(h.hotel.starRating))
.map((h) => (
<div key={h.hotel.name}>
stuff
</div>
))
}
作業代碼沙盒
uj5u.com熱心網友回復：
如果我正確理解您的問題，您希望它在更新 hotelRooms 后重新呈現嗎？如果這是正確的，當您第一次渲染它時，該值是 []，一個空白陣列。在這里：
useEffect(() => {
fetchHotels()
}, [])
最后一位 []，在渲染后運行一次。因此，在您的情況下（如果我的假設是正確的），您將希望將其更改為，因為您希望它在每次 hotelRooms 值更改時重新呈現
useEffect(() => {
fetchHotels()
}, [hotelRooms])
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/323678.html