React实现从API动态生成左侧分类菜单并保留切换功能

1. 新增分类数据的状态与API请求 #

先替换硬编码的分类数组，通过API异步获取分类数据，并维护对应的状态：

import { useState, useEffect } from 'react';

function App() {
  // 保留原有菜单数据与选中状态
  const [menuData, setMenuData] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState('');
  
  // 新增分类相关状态
  const [categories, setCategories] = useState([]);
  const [isCategoriesLoading, setIsCategoriesLoading] = useState(true);

  // 异步请求分类数据
  useEffect(() => {
    const fetchCategories = async () => {
      try {
        const response = await fetch('你的分类API地址');
        const fetchedCategories = await response.json();
        // 手动添加"全部"选项（如果API未返回）
        const categoriesWithAll = [{ id: 'all', name: '全部' }, ...fetchedCategories];
        setCategories(categoriesWithAll);
        // 设置初始选中第一个分类
        setSelectedCategory(categoriesWithAll[0].id);
      } catch (err) {
        console.error('分类数据加载失败:', err);
      } finally {
        setIsCategoriesLoading(false);
      }
    };
    fetchCategories();
  }, []);

  // 原有菜单数据请求逻辑保留
  useEffect(() => {
    const fetchMenuData = async () => {
      const res = await fetch('你的菜单API地址');
      const data = await res.json();
      setMenuData(data);
    };
    fetchMenuData();
  }, []);
}

2. 动态渲染分类菜单 #

基于API返回的分类数据生成菜单，同时处理加载状态：

<div className="categories">
  {isCategoriesLoading ? (
    <div>加载分类中...</div>
  ) : categories.length === 0 ? (
    <div>暂无分类数据</div>
  ) : (
    categories.map(category => (
      <button
        key={category.id}
        className={`category-btn ${selectedCategory === category.id ? 'active' : ''}`}
        onClick={() => setSelectedCategory(category.id)}
      >
        {category.name}
      </button>
    ))
  )}
</div>

3. 适配并保留筛选逻辑 #

原筛选逻辑无需大幅改动，只需确保选中的分类ID与菜单数据的分类字段匹配：

const filteredMenu = menuData.filter(item => {
  if (selectedCategory === 'all') return true;
  // 此处需确保item.category与分类API返回的id字段一致
  return item.category === selectedCategory;
});

4. 异常场景优化 #

可添加分类加载失败的兜底提示，避免空白页面：

{!isCategoriesLoading && categories.length === 0 && (
  <div className="error提示">分类加载失败，请刷新重试</div>
)}

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