时间戳

首页 > 解决方案 > 在反应的数据表中实现搜索过滤器的问题

reactjs - 在反应的数据表中实现搜索过滤器的问题

问题描述

我正在我的反应数据表中实现搜索过滤器功能。您可以在此处查看 UI ，以便更好地理解代码。我最初实现它是为了按名称搜索数据。（稍后我将实现它以在所有列中进行搜索）。过滤器搜索似乎不起作用。我是新来的反应，我做的一切都是正确的，但我仍然错过了一些东西。

这是我的Bookings2.js（表在此实现）

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 Bookings2= ()=>{
    const[Bookings, setBooking]=useState([]);
    const[search, setSearch]=useState("");

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

    useEffect(()=>{
        setBooking(
            Bookings.filter(Booking=>{
                return Booking.name.toLowerCase().includes(Booking.name.toLowerCase())
            })
        )
    }, [search, 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">Bookings2 Page</h2>
            <table class="table table-bordered table-striped border shadow">
                <thead>
                    <tr>
                        <th scope="col" colSpan={5}>
                        <BsFilterRight/> &nbsp;
                            <input 
                                placeholder=" search....."
                                onChange={e=>setSearch(e.target.value)}
                            />  
                        </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>
                    {Bookings.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 Bookings2;

标签： reactjssearchfilterdatatable

解决方案

可能还有其他不一致之处，我很乐意与您合作解决这些问题，但首先要注意的是：

        setBooking(
            Bookings.filter(Booking=>{
                return Booking.name.toLowerCase().includes(Booking.name.toLowerCase())
            })
        )

它应该是：

     if(search.length){
       setBooking(
            Bookings.filter(Booking =>
                Booking.name.toLowerCase().includes(search.toLowerCase())
            )
        )
     }

当然，这假设您的Bookings数组是一个对象数组，其中包含一个name键。

编辑：创建一个名为的变量bookings_array并将其放在组件之外：

...
let bookings_array = [];
const Bookings2= ()=>{
    const[Bookings, setBooking]=useState([]);
    const[search, setSearch]=useState("");
...

然后，将您的更改loadUsers为：

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

然后将里面的内容更改useEffect为：

     if(search.length){
       setBooking(
            Bookings.filter(Booking =>
                Booking.name.toLowerCase().includes(search.toLowerCase())
            )
        )
     }else{
       setBooking(bookings_array)
     }

推荐阅读