如何在react.js中链接两个过滤器

Question

我似乎无法在react.js中过滤两种不同的东西

我可以通过"酒店评级使用状态"进行过滤，但当我试图添加另一个时，它就不起作用了。在控制台中，它说应该有一个唯一的键道具。

如何过滤两个数据集?目前我正在过滤一个数据集与

.filter((h) => filter.ratings.includes(h.hotel.starRating))

当我尝试创建类似的东西时

(filter((room) => extra.occupancy.includes(room.occupancy.maxAdults)) 

会破坏代码，为什么呢?

这是我的代码:

import { useEffect, useState } from "react";
import './App.css';
export default function App() {
const [hotelRooms, setHotelRooms] = useState([]);
const [filter, setFilter] = useState({ ratings: ["1", "2", "3", "4", "5"] });
const [extra, setExtra] = useState ({occupancy: ["1", "2", "3", "4", "5"] });

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();
}, []);
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)]
});
}
};
const handleOccupancyExtra = (e) => {
if (e.target.checked) {
const perm = [...extra.occupancy];
perm.push(e.target.value);
setExtra({...extra, occupancy: perm});
} else {
setExtra ({
...extra,
occupancy: [...extra.occupancy.filter((d) => d !== e.target.value)]
});
}
} 
return (
<div className="App">
<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>
<div>
{["1", "2", "3", "4", "5"].map((adults) => (
<div key={"adults" + adults}>
<input
id={"maximum" + adults}
value={adults}
name="extra"
type="checkbox"
checked={extra.occupancy.includes(adults)}
onChange={handleOccupancyExtra}
/>
<label htmlFor={"maximum" + adults}>adults {adults}</label>
</div>
))}
</div>

{hotelRooms
.filter((h) => filter.ratings.includes(h.hotel.starRating))


.map((h) => (
<div>
<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>

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

</div>
))}
</div>
))}
</div>
);
}

Answer 1

您可以在过滤器中添加多个条件。

例子:

const arr = [1,2,3,4,5,6,7,8,9,10]
const evenNums = arr.filter(num => num%2===0)
const biggerThan5 = arr.filter(num => num > 5)
const evenAndBiggerThan5 = arr.filter(num => num > 5 && num%2 === 0)
console.log("evenNums:", evenNums)
console.log("biggerThan5:", biggerThan5)
console.log("evenAndBiggerThan5:", evenAndBiggerThan5)

在你的情况下

{hotelRooms
.filter((h) => filter.ratings.includes(h.hotel.starRating) && /* other condition (e.g. extra.occupancy.includes(...) */)

Codesandbox

这是一个基于我对你想要做什么的理解的代码沙箱。