Блог

Я реализую таблицу в react и хочу выполнять поиск данных в таблицах на основе двух факторов, то есть фильтра по имени и фильтра по консультанту. Вы можете увидеть ожидаемый результат здесь

Теперь проблема в том, что я успешно реализовал поиск по имени, и он работает нормально. Теперь я закодировал поиск по консультанту, но я не знаю, как вызвать его в теле таблицы вместе с поиском по имени.

Вот мой Bookings.js . Я знаю, что мне нужно вызывать FilteredConsultants в теле таблицы вместе с FilteredNames, но как это сделать?

 import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';
import '../../static/Bookings.css';
import {BsFilterRight} from "react-icons/bs";

const Bookings= ()=>{
    const[Bookings, setBooking]=useState([]);
    const[searchByName, setSearchByName]=useState('');
    const[FilteredNames, setFilteredNames]=useState([]);
    const[searchByConsultant, setSearchByConsultant]=useState('');
    const[FilteredConsultants, setFilteredConsultants]=useState([]);

    useEffect(()=>{
        loadUsers();
    }, []);

    useEffect(()=>{
        setFilteredNames(
            Bookings.filter(Booking=>{
                return Booking.name.toLowerCase().includes(searchByName.toLowerCase())
            })
        )
    }, [searchByName, Bookings]);

    useEffect(()=>{
        setFilteredConsultants(
            Bookings.filter(Booking=>{
                return Booking.consultant.toLowerCase().includes(searchByConsultant.toLowerCase())
            })
        )
    }, [searchByConsultant, Bookings]);

    const loadUsers= async()=>{
        const result =await axios.get("http://localhost:3001/Bookings");
        setBooking(result.data.reverse());
    };

    const deleteUser=async id => {
        await axios.delete(`http://localhost:3001/Bookings/${id}`);
        loadUsers();
    }

    return(
        <div className="Booking-page-container">
            <h2 className="text-center mb-4">Bookings Page</h2>
            <table class="table table-bordered table-striped border shadow">
                <thead>
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">
                        <BsFilterRight/>
                            <input 
                                placeholder="search by name..."
                                onChange={e=>setSearchByName(e.target.value)}
                            />  
                        </th>
                        <th scope="col">
                        <BsFilterRight/>
                            <input 
                                placeholder="search by consultant..."
                                onChange={e=>setSearchByConsultant(e.target.value)}
                            />
                        </th>
                        <th scope="col">Email</th>
                        <th>Action</th>
                    </tr>
                </thead>
          
                <thead class="thead-dark">
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">Name</th>
                        <th scope="col">Consultant</th>
                        <th scope="col">Email</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {FilteredNames.map((Booking,index)=>(
                        <tr>
                            <th scope="row">{index 1}</th>
                            <td>{Booking.name}</td>
                            <td>{Booking.consultant}</td>
                            <td>{Booking.email}</td>
                            <td>
                                <Link class="btn btn-primary mr-2" to={`/Bookings/view/${Booking.id}`}>View</Link>
                                <Link class="btn btn-outline-primary mr-2" to={`/Bookings/edit/${Booking.id}`}>Edit</Link>
                                <Link class="btn btn-danger" onClick={()=>deleteUser(Booking.id)}>Delete</Link>
                            </td>
                        </tr>   
                    ))}
                </tbody>
            </table>
        </div>
    );
};

export default Bookings;
 

Прямо сейчас в таблице once searchByConsultant or searchByName is changed отображаются заказы, отфильтрованные только по одному из значений.

Если вы хотите отфильтровать с помощью условия «и», тогда вам нужно будет создать фильтр, используя оба значения.

 useEffect(()=>{
  setFilteredNames(
      Bookings.filter(Booking=> {
        const byName = !searchByName || Booking.name.toLowerCase().includes(searchByName.toLowerCase());
        const byConsultant = !searchByConsultant || Booking.consultant.toLowerCase().includes(searchByConsultant.toLowerCase());
        return byName amp;amp; byConsultant;
      })
  )
}, [searchByName, searchByConsultant, Bookings]);

 

FilteredConsultants кажется, что здесь это на самом деле не используется