如何在 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(...) */)

代碼沙盒

這是一個基於我對你想要做什么的理解的代碼沙盒。