为什么 SearchBar 不保留结果中输入的文本 - 在 React.js 中

Question

我的 searchBar.jsx 有一些问题

在搜索栏中输入单词后，预期的搜索结果将正确显示。但是，当我继续删除输入的文本时，显示的结果将恢复为原始状态。理想情况下，我希望搜索栏即使在文本被清除后也能保留并显示以前获取的结果。

我尝试了很多我无法在这里发布的东西，因为它太长了，但我的狂热测试如下：

import { useEffect, useState } from "react";
import axios from "axios";
import SecurityViolation from "./../Components/SecurityViolation";
import "./../Style/SecurityViolation.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";

function Violation() {
    const [data, setData] = useState([]);
    const [searchTerm, setSearchTerm] = useState("");
    const [filteredData, setFilteredData] = useState([]);
    const [previousResults, setPreviousResults] = useState([]);

    useEffect(() => {
        axios
            .get(`http://localhost:5005/securityViolations`)
            .then((response) => {
                console.log(response.data);
                setData(response.data);
                setFilteredData(response.data);
                setPreviousResults(response.data);
            })
            .catch((error) => {
                console.log("Error fetching Data: ", error);
            });
    }, []);

    // search bar
    useEffect(() => {
        const filterData = () => {
            if (searchTerm.trim() === "") {
                setFilteredData(data);
            } else {
                setFilteredData(
                    data.filter(
                        (item) =>
                            item.user.familyName.toLowerCase().includes(searchTerm.toLowerCase()) ||
                            item.team.toLowerCase().includes(searchTerm.toLowerCase())
                    )
                );
            }
        };

        filterData();
    }, [searchTerm, data]);
    // --------

关于我的 div 与搜索栏

 <div className="searchBar_block">
                <FontAwesomeIcon icon={faMagnifyingGlass} />

                <input
                    type="text"
                    placeholder="Search all violation ..."
                    className="search"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                />
            </div>

            {filteredData.length === 0 ? (
                <p>Unfortunately, no data found</p>
            ) : (
                <table>

感谢您的宝贵时间

Answer 1

您可以使用的逻辑有很多变体，但一般来说，如果您只想在添加文本时更新过滤结果，而不是在搜索词中删除它，则可以实现一些附加状态来检查搜索如何术语已更改。

const [previousSearchTerm, setPreviousSearchTerm] = useState(searchTerm);

onChange

函数可以相应地更新这些内容，用类似

的内容替换

(e) => setSearchTerm(e.target.value)

(e) => {
    setPreviousSearchTerm(searchTerm)
    setSearchTerm(e.target.value)
}

然后根据差异有条件地更新过滤后的数据

if (searchTerm.trim() === "") {
    setFilteredData(data);
} else {
    if (searchTerm.len() > previousSearchTerm.len()) {
        setFilteredData(
            data.filter(
                (item) =>
                    item.user.familyName.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    item.team.toLowerCase().includes(searchTerm.toLowerCase())
            )
        );
    }
}