React按钮筛选数据异常求助：仅首个按钮有效，点击其他按钮数据消失

核心问题分析 #

按钮筛选仅第一个有效、其他点击后商品消失，大概率是筛选逻辑依赖了已过滤后的商品数组，或是分类值与商品的category字段不匹配导致的。

具体排查与修复步骤 #

1. 保留原始商品数组，基于原始数据过滤
   很多人会犯的错误：点击分类按钮时直接修改了存储商品的状态，导致后续筛选是在已缩小的子集里操作，自然找不到其他分类的商品。
   正确做法是单独存储原始全量商品，用状态存筛选条件，每次渲染时基于原始数组计算过滤结果：

// 初始化时保存原始商品
const [originalProducts, setOriginalProducts] = useState([]);
const [selectedCategory, setSelectedCategory] = useState('');
const [searchQuery, setSearchQuery] = useState('');

// 从接口获取数据时，把完整数组存在originalProducts里
useEffect(() => {
  fetch('/api/products')
    .then(res => res.json())
    .then(data => setOriginalProducts(data));
}, []);

// 实时计算过滤后的商品
const filteredProducts = originalProducts.filter(item => {
  // 同时兼容搜索框和分类筛选
  const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
  const matchesCategory = selectedCategory ? item.category === selectedCategory : true;
  return matchesSearch && matchesCategory;
});

2. 检查分类值与商品category字段的匹配度
   点击按钮后无商品，大概率是按钮传递的分类值和商品里的category字段不一致：

• 检查大小写：比如按钮传的是Cake，但商品里的category是cake，直接全等匹配会失败，改成统一大小写后再比较：

  const matchesCategory = selectedCategory 
    ? item.category.toLowerCase() === selectedCategory.toLowerCase() 
    : true;
  

• 检查是否用ID匹配而非名称：如果后端返回的分类有ID，商品里存的是分类ID而非名称，那按钮应该传递ID而不是分类名称：

  {categories.map(cat => (
    <button 
      key={cat.id} 
      onClick={() => setSelectedCategory(cat.id)}
    >
      {cat.name}
    </button>
  ))}
  

3. 修复按钮的筛选状态更新逻辑
   确保按钮点击时只更新筛选条件，不修改原始商品数组：

// 错误示例：直接修改products状态
// const handleFilter = (cat) => setProducts(products.filter(p => p.category === cat));

// 正确示例：只更新筛选条件
const handleFilter = (cat) => setSelectedCategory(cat);

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