如何在react.js中鏈接兩個過濾器

我似乎無法在 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>
  );
}

uj5u.com熱心網友回復：

您可以在過濾器中添加多個條件。

例子：

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

代碼沙盒

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

標籤：javascript 数组 反应 筛选

上一篇：輸入欄位未更新陣列中的“地址”

下一篇：在另一列的陣列python/pyspark中創建兩個相鄰數字之間的差異陣列列