React电商项目商品筛选功能失效问题求助

你的问题核心是只实现了筛选器的UI，缺少状态管理和筛选逻辑的关联，以下是完整的修复步骤：

1. 维护选中性别的状态 #

在product.jsx组件顶部，用useState定义存储选中性别的数组，同时维护原始商品数据和过滤后的商品列表：

import { useState, useEffect } from 'react';

const ProductPage = () => {
  // 原始商品数据（可替换为接口请求返回的数据）
  const [products, setProducts] = useState([
    { id: 1, name: "男士T恤", gender: "men", price: 99 },
    { id: 2, name: "女士连衣裙", gender: "women", price: 199 },
    { id: 3, name: "男士运动鞋", gender: "men", price: 299 },
    { id: 4, name: "女士包包", gender: "women", price: 399 },
  ]);
  // 存储选中的性别
  const [selectedGenders, setSelectedGenders] = useState([]);
  // 存储过滤后的商品
  const [filteredProducts, setFilteredProducts] = useState(products);

2. 实现复选框的 onChange 处理函数 #

补全handleGenderCheckboxChange函数，根据复选框的勾选状态更新选中数组：

const handleGenderCheckboxChange = (e) => {
    const value = e.target.value;
    setSelectedGenders(prev => {
      // 已选中则移除，未选中则添加
      if (prev.includes(value)) {
        return prev.filter(gender => gender !== value);
      } else {
        return [...prev, value];
      }
    });
  };

3. 添加自动筛选逻辑 #

用useEffect监听selectedGenders的变化，自动过滤商品列表：

useEffect(() => {
    // 未选中任何性别时显示全部商品
    if (selectedGenders.length === 0) {
      setFilteredProducts(products);
    } else {
      // 过滤出性别匹配选中项的商品
      const filtered = products.filter(product => 
        selectedGenders.includes(product.gender)
      );
      setFilteredProducts(filtered);
    }
  }, [selectedGenders, products]);

4. 同步UI与状态并渲染筛选结果 #

给复选框添加checked属性确保UI和状态同步，同时渲染filteredProducts而非原始商品数据：

return (
    <div className="flex">
      {/* 左侧筛选器区域 */}
      <div className="w-1/4">
        <div className="border-t border-gray-200 px-4 py-6">
          <h3 className="-mx-2 -my-3 flow-root">
            <button type="button" className="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false">
              <span className="font-medium text-gray-900">Gender</span>
            </button>
          </h3>
          
          <div className="pt-6" id="filter-section-mobile-0">
            <div className="space-y-6">
              <div className="flex items-center">
                <input 
                  id="filter-mobile-gender-0" 
                  name="gender[]" 
                  value="men" 
                  type="checkbox" 
                  className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" 
                  onChange={handleGenderCheckboxChange}
                  checked={selectedGenders.includes("men")}
                />
                <label htmlFor="filter-mobile-gender-0" className="ml-3 min-w-0 flex-1 text-gray-500" >Men</label>
              </div>
              <div className="flex items-center">
                <input 
                  id="filter-mobile-gender-1" 
                  name="gender[]" 
                  value="women" 
                  type="checkbox" 
                  className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" 
                  onChange={handleGenderCheckboxChange}
                  checked={selectedGenders.includes("women")}
                />
                <label htmlFor="filter-mobile-gender-1" className="ml-3 min-w-0 flex-1 text-gray-500" >Women</label>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 右侧商品列表区域 */}
      <div className="w-3/4 p-6">
        <div className="grid grid-cols-3 gap-4">
          {filteredProducts.map(product => (
            <div key={product.id} className="border p-4">
              <h3>{product.name}</h3>
              <p>${product.price}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ProductPage;

关键注意点 #

• 必须添加checked属性，保证复选框的UI状态和组件内的选中状态一致
• 过滤逻辑要基于原始商品数据，避免多次过滤导致数据丢失
• 如果商品数据来自接口请求，需在请求完成后再初始化筛选逻辑

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