React.js搜索栏异常：清空输入后无法保留已获取的搜索结果

核心问题在于你当前的逻辑在搜索框清空时，会直接把filteredData重置为原始的data，所以才会回到初始状态。要实现清空后保留最后一次搜索结果，只需要把每次有效搜索的结果存起来，空输入时调用这个缓存结果即可。

修改后的完整代码如下：

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 [lastValidResults, setLastValidResults] = useState([]); // 缓存最后一次有效搜索结果

    useEffect(() => {
        axios
            .get(`http://localhost:5005/securityViolations`)
            .then((response) => {
                console.log(response.data);
                setData(response.data);
                setFilteredData(response.data);
                setLastValidResults(response.data); // 初始时把原始数据设为默认缓存
            })
            .catch((error) => {
                console.log("Error fetching Data: ", error);
            });
    }, []);

    // 搜索逻辑修改
    useEffect(() => {
        const filterData = () => {
            if (searchTerm.trim() !== "") {
                // 有搜索词时，计算过滤结果并缓存
                const results = data.filter(
                    (item) =>
                        item.user.familyName.toLowerCase().includes(searchTerm.toLowerCase()) ||
                        item.team.toLowerCase().includes(searchTerm.toLowerCase())
                );
                setFilteredData(results);
                setLastValidResults(results);
            } else {
                // 无搜索词时，使用缓存的最后一次结果
                setFilteredData(lastValidResults);
            }
        };

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

搜索栏的DOM部分无需改动，保持原有代码即可：

<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>
        {/* 表格内容 */}
    </table>
)}

关键改动说明 #

1. 新增lastValidResults状态专门缓存最后一次有搜索词时的过滤结果
2. 当搜索词非空时，计算结果后同时更新filteredData和lastValidResults
3. 搜索词清空时，不再重置为原始数据，而是调用缓存的lastValidResults
4. 将lastValidResults加入useEffect依赖数组，确保状态变化时能触发更新

内容的提问来源于stack exchange，提问作者Conrad