React JS列表组件如何默认激活首个分类并筛选内容？

问题核心是组件初始化时没把首个分类设为激活状态，导致默认显示全部商品——而点击分类后的筛选逻辑是正常的，只需要调整初始化逻辑即可：

• 找到管理激活分类状态的代码，把初始值从“全部”对应的标识（比如空串、null）改成分类数组的第一个元素。
• 确保筛选逻辑在组件挂载时就基于初始激活分类执行，而不是仅在点击分类时触发。

举个React项目的代码调整示例：

// 原错误初始化（导致默认显示全部）
// const [activeCategory, setActiveCategory] = useState('');

// 修改后的初始化，假设categories是你的分类数据数组
const [activeCategory, setActiveCategory] = useState(categories[0]);

// 用useEffect确保初始状态下也执行筛选
useEffect(() => {
  const filtered = products.filter(prod => prod.category === activeCategory);
  setFilteredProducts(filtered);
}, [activeCategory, products]);

这样用户首次访问时，首个分类会自动激活，商品列表也会自动筛选出对应分类的内容，和点击分类后的逻辑保持一致。

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