React中点击分类按钮如何切换展示对应分类的商品列表？

你现有代码无法切换的核心问题有3个：

• 分类ID映射错误：把分类id设成了分类名称字符串，和数字类型的selectedCategoryId不匹配，没法正确索引对应分类
• 缺少状态联动逻辑：初始加载只取了一次默认分类的商品，点击分类更新selectedCategoryId后，没有同步更新productList
• 缺少边界判断：接口返回空数组时直接取索引值会抛错，也没有做默认选中态的初始化

具体修改步骤 #

1. 修正分类数据转换逻辑，统一ID类型 #

不要用分类名当id，用数组索引生成数字ID，和选中分类ID的类型保持一致：

function fetchCategoryHandler() {
   fetch('http://localhost:4567/categorie').then(response => {
     return response.json();
   }).then(data => {
     const transformedCategories = data.map((categoryData, index) => {
       return {
        id: index, // 用数字索引作为分类ID
        name: categoryData.CategorieNaam,
        products: categoryData.products
       };
     });

     setCategories(transformedCategories);
     // 加空值判断，避免接口返回空时报错
     if(transformedCategories.length > 0) {
       setProductList(transformedCategories[0].products);
       setSelectedCategoryId(0); // 默认选中第一个分类
     }
   });
}

2. 新增状态监听，选中分类变化时自动更新商品列表 #

不需要重复请求接口，直接从已经拉取到的分类数据里匹配对应商品即可：

// 和现有拉取分类的useEffect同级放置
useEffect(() => {
  // 分类数据未加载完成时不执行逻辑
  if(categories.length === 0) return;
  // 匹配当前选中的分类
  const currentCategory = categories.find(cat => cat.id === selectedCategoryId);
  if(currentCategory) {
    setProductList(currentCategory.products);
  }
}, [selectedCategoryId, categories]); // 选中ID、分类数据变化时触发更新

3. 补全分类组件的传参和点击逻辑 #

首先给Categorielijst组件补上选中分类ID的传值，用于判断按钮高亮态：

<Categorielijst 
  categories={categories}
  setCategory={setSelectedCategoryId} 
  selectedCategoryId={selectedCategoryId} // 新增这行传值
  activeComponent={activeComponent} 
  setActiveComponent={setActiveComponent}
/>

然后在Categorielijst组件内部，给分类按钮绑定正确的点击事件，参考逻辑：

// 组件内分类按钮渲染示例
{categories.map(category => (
  <button 
    key={category.id}
    onClick={() => setCategory(category.id)} // 点击时传入对应分类的数字ID
    className={selectedCategoryId === category.id ? 'active-btn' : ''} // 选中态加高亮样式
  >
    {category.name}
  </button>
))

4. 清理冗余代码 #

你代码中定义的defaultPage、showDefaultPage、categoryChosen几个状态和函数没有实际业务用途，可以直接删除，避免逻辑干扰。

修改完成后的执行逻辑：

• 页面初始化拉取全部分类和关联商品，默认展示第一个分类的商品列表
• 点击分类按钮时更新selectedCategoryId为对应分类ID
• 副作用监听到ID变化，自动匹配对应分类的商品更新productList
• 商品列表组件接收到新数据自动重渲染，完成切换

效果参考：

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