时间戳

首页 > 解决方案 > react.js 如何实现多输入搜索？

javascript - react.js 如何实现多输入搜索？

问题描述

我正在构建一个预订酒店应用程序，我正在尝试使用 react.js 通过多个输入来实现搜索。我尝试使用下面的代码，但有两个错误：

第一个错误：每当我更改房间类型的值或客人数量时，我都会得到前一个状态的结果，我总是得到前一个状态的结果。搜索工作正常，但它使用前一个状态。第二个错误：如何实现对象的两个结果的交集。

或者，如果有人可以提供更好的解决方案。

import React, { useState } from 'react';
import './SearchPage.css';
import RoomList from './RoomList';
import { v4 as uuidv4 } from 'uuid';

const SearchPage = () => {
  const Rooms = [
    {
      id: uuidv4(),
      description: 'Chnambre du luxe 1',
      size: 250,
      guests: '4',
      roomType: 'family room',
      pets: false,
      picture: 'pictures/pic.jfif',
      price: 1000,
    },
    {
      id: uuidv4(),
      description: 'chambre du lux2',
      picture: 'pictures/pic2.jfif',
      price: 2000,
      size: 300,
      guests: '4',
      roomType: 'single room',
      pets: true,
    },
    {
      id: uuidv4(),
      description: 'chambre du luxe 3',
      picture: 'pictures/pic2.jfif',
      price: 2500,
      size: 350,
      guests: '2',
      roomType: 'family room',
      pets: true,
    },
  ];
  const [foundRooms, setFoundRooms] = useState(Rooms);
  const [roomType, setRoomType] = useState('All');
  const [guestNumber, setGuestNumber] = useState('0');

  const HandleGuestNumber = (state) => {
    const results = Rooms.filter((room) => room.guests === state);
    return results;
  };

  const HandleRoomType = (state) => {
    let results = [];
    results = Rooms.filter((room) => {
      let rooms = room.roomType.match(state);
      return rooms;
    });
    return results;
  };

  const HandleOnChange = (event) => {
    switch (event.target.name) {
      case 'roomType':
        setRoomType(event.target.value);
        break;
      case 'guestNumber':
        setGuestNumber(event.target.value);
        break;
      default:
        console.log(`Sorry, we are out of.`);
    }

    let foundRooms = HandleRoomType(roomType) && HandleGuestNumber(guestNumber);

    setFoundRooms(foundRooms);
  };

  return (
    <div>
      <div className="SearchPage">
        <h1> Search</h1>
      </div>
      <div className="SearchContainers">
        <div className="SearchItem">
          <span>Room Type : </span>
          <select onChange={HandleOnChange} name="roomType">
            <option value="All">All</option>
            <option value="family room">Family Room</option>
            <option value="single room">Single Room</option>
            <option value="Luxiourious Family Room">
              Luxiourious Family Room
            </option>
            <option value="Luxiourious Single Room">
              Luxiourious Single Room
            </option>
          </select>
        </div>

        <div className="SearchItem">
          <span> Guests : </span>
          <select onChange={HandleOnChange} name="guestNumber">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        
    </div>
  );
};

export default SearchPage;

标签： javascripthtmlreactjs

解决方案

在您的HandleOnChange功能中，您正在执行以下操作：

let foundRooms = HandleRoomType(roomType) && HandleGuestNumber(guestNumber);

setFoundRooms(foundRooms);

这几乎肯定不是你认为它正在做的事情。

由于HandleRoomType总是返回一个数组，所以foundRooms总是计算为HandleGuestNumber(guestNumber).

听起来您想foundRooms成为包含在两者返回的数组中的房间HandleRoomType和HandleGuestNumber。

你可以做到这一点的一种方法是做另一个过滤器。

const roomsMatchingType = HandleRoomType(roomType)
const roomsMatchingGuestNumber = HandleGuestNumber(guestNumber)
const intersection = Rooms.filter(room => roomsMatchingType.some(r => r.id === room.id) && roomsMatchingGuestNumber.some(r => r.id === room.id))

推荐阅读