在 Reactjs 中实现搜索过滤器的问题-触发问题 [英] Problem in implementing Search Filter in Reactjs- Trigger issues

问题描述

我正在实现一个带有搜索过滤器的反应数据表来搜索行.您可以在此处查看用户界面，以便更好地理解代码.我实现了它最初按名称搜索行.(稍后我将实现它以在所有列中搜索).

正如您在 UI 中看到的，顶部有三个名为Kamakshi"、Kanika"的条目；和卡尼卡"分别.当我输入Kam"时在搜索框中，会显示此结果.现在按退格键，我的输入变成了ka"，这意味着我的搜索结果应该显示三行Kamakshi"、Kanika"和Kamakshi".和卡尼卡".但是没有任何变化.

我想在每次输入更改时触发搜索过滤器.我在 useEffect 中将其作为依赖项传递，但没有奏效.

这是我的Bookings2.js(表格在此实现)

import React, {useState, useEffect} from 'react';从 'axios' 导入 axios；从 'react-router-dom' 导入 {Link}；导入'../../static/Bookings.css';从react-icons/bs"导入{BsFilterRight}；让bookings_array = [];const Bookings2= ()=>{const[Bookings, setBooking]=useState([]);const[search, setSearch]=useState(");useEffect(()=>{加载用户()；}, []);useEffect(()=>{如果(搜索.长度){订票(Bookings.filter(Booking =>Booking.name.toLowerCase().includes(search.toLowerCase())))}别的{setBooking(bookings_array)}}, [搜索, 预订]);const loadUsers= async()=>{const result =await axios.get("http://localhost:3001/Bookings");预订数组=result.data.reverse();setBooking(bookings_array);};const deleteUser=async id =>{await axios.delete(`http://localhost:3001/Bookings/${id}`);加载用户()；}返回(<div className="Booking-page-container"><h2 className="text-center mb-4">Bookings2 Page</h2><table class="table table-bordered table-striped border shadow"><头><tr><th范围=col"colSpan={5}><BsFilterRight/>&nbsp;<输入占位符="搜索……"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>{Bookings.map((Booking,index)=>(<tr><th范围=行">{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}`}>查看<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</td></tr>))}</tbody>

);};导出默认预订2；

解决方案

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

if (search.length) {订票(Bookings.filter(Booking =>Booking.name.toLowerCase().includes(search.toLowerCase())))} 别的 {setBooking(bookings_array)}

到:

if (search.length) {订票(bookings_array.filter(Booking =>Booking.name.toLowerCase().includes(search.toLowerCase())))} 别的 {setBooking(bookings_array)}

I am implementing a react data table with a search filter in it to search the rows. You can see the UI here for a better understanding of code. I implemented it to search the rows by names initially. (I will implement it to search in all columns later).

As you can see in the UI that there are three entries at top named "Kamakshi", "Kanika" and "Kanika" respectively. When I type "Kam" in the search box then this result is shown. Now on pressing backspace my input becomes "ka", which means my search result should show three rows of "Kamakshi", "Kanika" and "Kanika". But there are no changes.

I want to trigger the search filter everytime there is a change in input. I passed it as dependency in useEffect but it didn't worked.

Here is my Bookings2.js (Table is implemented in this)

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;

解决方案

Instead of filtering the state array, try filtering the original, which is stored in bookings_array. So change this:

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

to:

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

这篇关于在 Reactjs 中实现搜索过滤器的问题-触发问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！