在 Reactjs 中实现搜索过滤器的问题 - 触发问题

Question

我正在实施一个带有搜索过滤器的反应数据 table 来搜索行。您可以查看 UI here 以更好地理解代码。我最初实现它是为了按名称搜索行。（稍后我将实现它以在所有列中搜索）。

如您在 UI 中所见，顶部有三个条目，分别名为“Kamakshi”、“Kanika”和“Kanika”。当我在搜索框中键入“Kam”时，会显示 this 结果。现在按下退格键，我的输入变成了“ka”，这意味着我的搜索结果应该显示三行“Kamakshi”、“Kanika”和“Kanika”。但是没有变化。

我想在每次输入发生变化时触发搜索过滤器。我在 useEffect 中将它作为依赖项传递，但它没有用。

这里是我的Bookings2.js（Table是在这实现的）

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";

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

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

    useEffect(()=>{
        if(search.length){
        setBooking(
                Bookings.filter(Booking =>
                    Booking.name.toLowerCase().includes(search.toLowerCase())
                )
            )
        }else{
            setBooking(bookings_array)
        }
    }, [search, Bookings]);


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

    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;

Answer 1

只要搜索发生变化，您就会从 Bookings 中删除内容...但是当新的更改出现时您不会将它们添加回去，这就是它们不会在退格时返回的原因。如果您想重新加载原始预订以进行过滤，您需要再次运行您的 loadUsers 功能。

Answer 2

不要过滤状态数组，而是尝试过滤存储在 bookings_array 中的原始数组。所以改变这个：

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

至：

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

在 Reactjs 中实现搜索过滤器的问题 - 触发问题

Problem in implementing Search Filter in Reactjs- Trigger issues

datatable

search

reactjs

react-hooks