ReactJS多条件筛选问题：如何同时按类别、品牌、类型筛选产品

我想对产品按类别、类型和品牌进行多条件筛选，但目前参考教程写的代码只能支持单一条件筛选——选了某类别（比如'test'）后再点其他筛选条件，页面就没内容了。以下是我的代码：

const filterResult = (catItem) => {
    const result = product.filter((product) => {
        return product.category === catItem
    });
    setProduct(result);
}

<div>
    <h3 onClick={ () => {filterResult('test')}}>Filter by Category "test"</h3>
    <h3 onClick={ () => {filterResult('abc')}}>Filter by Category "abc"</h3>
    <h3 onClick={ () => {filterResult('efg')}}>Filter by Category "efg"</h3>
    <h3 onClick={ () => {filterResult('belden')}}>Filter by Brand "belden"</h3>
    <h3 onClick={ () => {filterResult('bluguard')}}>Filter by Brand "bluguard"</h3>
    <h3 onClick={ () => {filterResult('audio')}}>Filter by Type "audio"</h3>
    <h3 onClick={ () => {filterResult('wifi ')}}>Filter by Type "wifi"</h3>
    <h3 onClick={lowToHigh}>Sort By Low to High</h3>
    <h3 onClick={highToLow}>Sort By High to Low</h3>
 </div>

请问怎么实现类别、类型和品牌的多条件同时筛选？

核心问题是你每次筛选都直接覆盖了产品状态，后续筛选是在已过滤的结果上继续缩小范围，而非基于原始数据。要实现多条件筛选，需维护独立的筛选条件状态，始终从原始数据重新计算结果。

1. 维护筛选条件状态 #

用状态变量保存当前的类别、品牌、类型筛选条件，初始值设为null表示未开启该维度筛选：

const [filters, setFilters] = useState({
  category: null,
  brand: null,
  type: null
});

2. 修改筛选触发逻辑 #

替换原来的filterResult，改用统一函数更新对应维度的筛选条件，支持点击同一选项取消筛选：

const updateFilter = (filterType, value) => {
  setFilters(prev => ({
    ...prev,
    // 点击已选中的选项则清空该条件
    [filterType]: value === prev[filterType] ? null : value
  }));
};

然后更新页面筛选按钮的点击事件：

<div>
  <h3 onClick={() => updateFilter('category', 'test')}>Filter by Category "test"</h3>
  <h3 onClick={() => updateFilter('category', 'abc')}>Filter by Category "abc"</h3>
  <h3 onClick={() => updateFilter('category', 'efg')}>Filter by Category "efg"</h3>
  <h3 onClick={() => updateFilter('brand', 'belden')}>Filter by Brand "belden"</h3>
  <h3 onClick={() => updateFilter('brand', 'bluguard')}>Filter by Brand "bluguard"</h3>
  <h3 onClick={() => updateFilter('type', 'audio')}>Filter by Type "audio"</h3>
  <h3 onClick={() => updateFilter('type', 'wifi')}>Filter by Type "wifi"</h3>
  <h3 onClick={lowToHigh}>Sort By Low to High</h3>
  <h3 onClick={highToLow}>Sort By High to Low</h3>
</div>

3. 基于原始数据计算筛选结果 #

不要修改原始产品状态，用useMemo根据原始数据和当前筛选条件实时计算结果（假设你有保存原始产品的状态originalProducts）：

const filteredProducts = useMemo(() => {
  return originalProducts.filter(product => {
    // 每个维度有筛选值则判断匹配，无值则跳过该条件
    const matchesCategory = !filters.category || product.category === filters.category;
    const matchesBrand = !filters.brand || product.brand === filters.brand;
    const matchesType = !filters.type || product.type === filters.type;
    
    return matchesCategory && matchesBrand && matchesType;
  });
}, [originalProducts, filters]);

4. 适配排序逻辑 #

把排序条件也加入状态，和筛选结果一起计算最终渲染列表：

const [sortOrder, setSortOrder] = useState(null); // 'asc' 升序 / 'desc' 降序

const lowToHigh = () => setSortOrder('asc');
const highToLow = () => setSortOrder('desc');

const sortedFilteredProducts = useMemo(() => {
  let result = [...filteredProducts];
  if (sortOrder === 'asc') {
    result.sort((a, b) => a.price - b.price); // 假设按price字段排序，可替换为你的实际字段
  } else if (sortOrder === 'desc') {
    result.sort((a, b) => b.price - a.price);
  }
  return result;
}, [filteredProducts, sortOrder]);

最后页面渲染sortedFilteredProducts即可。

关键注意点 #

• 始终基于原始产品数据筛选，避免因覆盖状态导致后续筛选无数据。
• 用独立状态管理筛选条件，每次更新条件后重新计算结果。
• 支持取消已选中的筛选条件，提升用户交互体验。

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