如何实现无白屏的React产品列表过滤？分类按钮点击页面消失求助

问题根因 #

你这个问题大概率是过滤逻辑里踩了「直接修改原始数据源」的坑——第一次点击分类过滤后，原始产品数据被截断了，第二次再点的时候，没东西可过滤，自然页面就空了。

修复思路与代码示例 #

核心就是保留完整的原始数据副本，每次过滤都基于原始数据操作：

• 把所有产品的完整数据存在常量或useRef里，全程不要修改这份数据；
• 用单独的state存储当前选中的分类，比如activeCategory；
• 渲染时根据当前选中的分类，从原始数据中动态筛选要展示的产品。

关键代码片段：

// 存储完整的原始产品数据，不要修改它
const originalProducts = [/* 你的全部产品数据 */];
// 仅记录当前选中的分类
const [activeCategory, setActiveCategory] = useState('all');

// 每次渲染都从原始数据中筛选
const filteredProducts = activeCategory === 'all' 
  ? originalProducts 
  : originalProducts.filter(product => product.category === activeCategory);

// 分类按钮点击只更新选中状态
const handleCategorySelect = (category) => {
  setActiveCategory(category);
};

为什么之前的尝试没解决问题？ #

如果之前只是把数据存在内存中但依然直接修改了这份内存数据，问题必然还会存在。必须保证每次过滤的数据源都是完整无修改的原始数据，不能基于上一次过滤后的结果再次筛选。

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