React更新state做标签筛选时如何保留原始数据解决二次筛选失效问题

• 核心问题：你的筛选逻辑始终基于当前渲染的cardInfo数据，而非全量原始数据。首次筛选后cardInfo已经被替换为对应分类的子集，后续再筛选其他分类时，只能在这个子集里查找，自然找不到匹配内容，只有点击「全部」重置回全量数据才能恢复。

修复步骤 #

1. 修改筛选逻辑的数据源 #

你已经在Context中存储了全量原始数据permanentData，直接把筛选的基准改为permanentData即可，同时补充「全部」分类的判断逻辑：

const handleFiltering = (category) => {
    // 点击「全部」直接返回全量数据
    if (category === '全部') {
        setCardInfo(permanentData);
        return;
    }
    // 始终从全量原始数据中筛选，而非当前已过滤的cardInfo
    const filteredData = permanentData?.filter((item: feedbackTypes) => item.categories === category);
    setCardInfo(filteredData);
};

2. 补全Context Provider的传值 #

确保你用到的所有数据和方法都已经注入到Context中，避免取值报错：

return <DataContext.Provider value={{ 
    cardInfo, 
    setCardInfo,
    permanentData, // 保证全量原始数据可在Context中正常获取
    handleFiltering 
}}>{children}</DataContext.Provider>

3. 可选优化（标签选中逻辑） #

当前标签是单选逻辑，无需用数组存储选中值，直接存字符串即可简化判断：

// 标签选中状态定义
const [selectedTag, setSelectedTag] = useState('全部')
const handleBtnStyle = (tag) => {
    setSelectedTag(tag)
}
// 标签类名判断简化为
className={selectedTag === values ? styles.tagSelected : styles.tagUnselected}

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