搜索与筛选功能异常：初始正常，后续操作返回空结果

问题根源 #

你的核心问题在于每次过滤操作都会直接覆盖原始数据状态：

• 初始加载时problems是完整的数据集
• 第一次搜索后，setProblems(search)把problems替换成了搜索后的子集
• 当清空输入或重新搜索时，过滤逻辑只能基于这个子集执行，而非原始完整数据，最终导致结果为空；筛选功能同理，会进一步缩小数据范围，让后续操作无数据可过滤

修复方案 #

核心思路是分离原始数据与过滤结果：始终保留一份完整的原始数据集，所有过滤操作都基于原始数据执行，只更新过滤后的结果状态。

1. 修改index.tsx，分离原始数据与过滤结果

const prbs = useGetProblems()
// 存储从后端获取的完整原始数据
const [originalProblems, setOriginalProblems] = useState<DBProblem[]>([])
// 存储最终展示的过滤后结果
const [filteredProblems, setFilteredProblems] = useState<DBProblem[]>([])

useEffect(() => {
    if (prbs) {
        setOriginalProblems(prbs);
        setFilteredProblems(prbs); // 初始状态展示全部数据
    }
}, [prbs]);

// 搜索处理函数：基于原始数据过滤
const handleSearch = (searchQuery: string) => {
    const result = originalProblems.filter(item => 
        item.title.toLowerCase().includes(searchQuery.toLowerCase())
    );
    setFilteredProblems(result);
};

// 筛选处理函数：基于原始数据过滤（根据你的Filter逻辑调整）
const handleFilter = (category: string) => {
    const result = originalProblems.filter(item => 
        item.category === category // 假设你的筛选是匹配category字段
    );
    setFilteredProblems(result);
};

// 渲染组件时传入过滤处理函数，而非直接修改原始数据
return (
    <div className='w-full flex'>
        <Search onSearch={handleSearch} />
        <Filter onFilter={handleFilter} category='Array'/>
        {/* 展示filteredProblems的列表组件 */}
    </div>
)

2. 简化Search组件，专注输入与触发搜索

interface SearchProps {
    onSearch: (query: string) => void;
}

const Search: React.FC<SearchProps> = ({onSearch}) => {
    const [query, setQuery] = useState('');

    const updateSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        setQuery(value);
        onSearch(value);
    };

    return (
        <div>
            <input type="text" onChange={updateSearch} value={query} />
        </div>
    )
}

3. 调整Filter组件，触发基于原始数据的筛选

interface FilterProps {
    onFilter: (category: string) => void;
    category: string;
}

const Filter: React.FC<FilterProps> = ({onFilter, category}) => {
    const handleFilterClick = () => {
        onFilter(category);
    };

    return (
        {/* 这里根据你的筛选UI调整，比如按钮、下拉框等 */}
        <button onClick={handleFilterClick}>筛选 {category}</button>
    )
}

额外说明 #

• 如果需要同时支持搜索和筛选的组合逻辑（比如先搜索再筛选，或反之），可以在handleSearch和handleFilter中结合当前的搜索条件和筛选条件，基于原始数据进行复合过滤
• 自定义hookuseGetProblems无需修改，它只负责获取并返回完整的原始数据

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