ReactJS基于分类属性动态过滤数据：去重、多选与全取消选实现求助

一、分类去重实现 #

直接从项目数组中提取唯一分类集合，避免重复渲染：

// 从数据中提取不重复的分类
const uniqueCategories = [...new Set(data.map(item => item.category))];

之后遍历uniqueCategories渲染侧边分类列表即可解决重复问题。

二、无e.target.value的多分类筛选实现 #

用Set维护选中分类的状态，直接传递分类名称触发选择逻辑，无需依赖DOM节点值：

import { useState } from 'react';

// 初始化选中分类集合
const [selectedCategories, setSelectedCategories] = useState(new Set());

// 切换单个分类的选中状态
const toggleCategory = (category) => {
  setSelectedCategories(prev => {
    const updatedSet = new Set(prev);
    updatedSet.has(category) ? updatedSet.delete(category) : updatedSet.add(category);
    return updatedSet;
  });
};

// 筛选对应项目
const filteredItems = selectedCategories.size === 0 
  ? data 
  : data.filter(item => selectedCategories.has(item.category));

渲染分类项时直接传入分类值：

{uniqueCategories.map(category => (
  <div 
    key={category}
    onClick={() => toggleCategory(category)}
    className={selectedCategories.has(category) ? 'active-category' : ''}
  >
    {category}
  </div>
))}

三、取消所有选择功能 #

添加清空选中集合的方法即可：

const clearAllSelections = () => {
  setSelectedCategories(new Set());
};

对应UI按钮：

<button onClick={clearAllSelections}>取消所有选择</button>

四、方案合理性与数据重构建议 #

当前方案逻辑清晰，无需大规模重构数据。如果后续数据量较大（如千级以上项目），可以提前预处理分类-项目映射来优化筛选性能：

import { useMemo } from 'react';

// 用useMemo缓存分类映射，避免重复计算
const categoryItemMap = useMemo(() => {
  return data.reduce((map, item) => {
    map[item.category] = [...(map[item.category] || []), item];
    return map;
  }, {});
}, [data]);

// 筛选时直接合并选中分类的项目数组
const filteredItems = selectedCategories.size === 0
  ? data
  : Array.from(selectedCategories).flatMap(cat => categoryItemMap[cat] || []);

五、类似问题的常见讨论方向 #

在Stack Exchange生态中，这类问题的常见讨论点包括：

• 大数据量下的筛选性能优化（如memoization、提前分组）
• 复杂筛选逻辑下的状态管理方案（useState vs useReducer）
• 多选筛选的UI交互设计（全选/反选、选中状态可视化）
• 受控/非受控组件在筛选场景中的适用场景

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