ReactJS应用静态分类列表转API动态获取并保留过滤功能

核心思路 #

通过API获取菜单数据后提取唯一分类，替换原静态分类列表，同时复用原有过滤逻辑，无需改动核心展示逻辑。

具体实现步骤 #

1. 添加分类相关状态
   在组件中新增状态存储分类列表、加载状态，用于动态渲染和用户反馈：

const [categories, setCategories] = useState([]);
const [isLoadingCategories, setIsLoadingCategories] = useState(true);

2. 请求API并提取唯一分类
   使用useEffect在组件挂载时请求目标API，从返回的菜单数据中提取不重复的分类值，同时保留"全部"选项以兼容原有功能：

useEffect(() => {
  fetch('https://63b6952d1907f863aafa9342.mockapi.io/menu/')
    .then(response => response.json())
    .then(rawData => {
      // 从所有菜品中提取唯一分类
      const uniqueCats = [...new Set(rawData.map(item => item.category))];
      // 前置"全部"选项，和原功能保持一致
      setCategories(['全部', ...uniqueCats]);
      setIsLoadingCategories(false);
    })
    .catch(error => {
      console.error('分类加载失败:', error);
      // 请求失败时默认显示"全部"分类
      setCategories(['全部']);
      setIsLoadingCategories(false);
    });
}, []);

3. 替换静态分类为动态渲染
   把原来硬编码的分类按钮列表，改成遍历categories状态生成：

{isLoadingCategories ? (
  <p>加载分类中...</p>
) : (
  categories.map((cat, idx) => (
    <button
      key={idx}
      className={`category-btn ${activeCategory === cat ? 'active' : ''}`}
      onClick={() => setActiveCategory(cat)}
    >
      {cat}
    </button>
  ))
)}

4. 复用原有过滤逻辑
   原有的菜品过滤逻辑完全不需要修改，因为activeCategory的判断逻辑和之前一致：

const filteredItems = activeCategory === '全部'
  ? items
  : items.filter(item => item.category === activeCategory);

额外优化建议 #

• 可以对提取的分类做排序处理，让分类列表更规整：uniqueCats.sort()
• 若API请求频繁，可添加防抖或缓存机制减少请求次数
• 错误状态下可增加用户友好的提示，比如显示"分类加载失败，默认显示全部菜品"

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