React中利用Axios实现动态分类API调用的最佳实践

在React应用中，根据用户点击不同的分类项来动态触发API调用并获取相应数据是一种常见的需求。例如，用户点击“海鲜”分类，则加载海鲜食谱；点击“甜点”分类，则加载甜点食谱。然而，在实现这一功能时，开发者有时会遇到一些陷阱，特别是在处理HTML元素的属性时。

问题剖析：

一个常见的误区是尝试将自定义的分类值存储在

<li value="Seafood" onClick={onClickHandler}>
     Seafood
</li>

并期望通过以下方式获取值：

const onClickHandler = (e: any) => {
  setCategory(e.target.value); // 期望获取 "Seafood"
};

然而，这种做法会导致e.target.value返回null或空字符串。这是因为

（有序列表）中的序号值。它只允许数字作为值，并且主要用于控制有序列表的起始编号。因此，将字符串如“Seafood”赋值给
1. 的value属性是无效的，并且无法通过e.target.value正确获取。

   核心逻辑：React Hooks与Axios集成

   在深入探讨解决方案之前，我们先明确动态API调用的核心React逻辑。这部分代码负责管理当前选中的分类状态，并在分类变化时触发API请求。

   import React, { useState, useEffect } from 'react';
   import axios from 'axios';
   
   const API_BASE_URL = "https://www.themealdb.com/api/json/v1/1/filter.php?c="; // 示例API基础URL
   
   function CategoryFilter() {
     const [category, setCategory] = useState<string>(""); // 存储当前选中的分类
     const [meals, setMeals] = useState<any[]>([]); // 存储API返回的菜品数据
     const [loading, setLoading] = useState<boolean>(false);
     const [error, setError] = useState<string | null>(null);
   
     useEffect(() => {
       if (!category) return; // 如果没有分类，则不发起请求
   
       setLoading(true);
       setError(null);
   
       axios.get(`${API_BASE_URL}${category}`)
         .then(function (response) {
           setMeals(response.data.meals || []); // 更新菜品数据，如果无数据则为空数组
           console.log(`Fetched ${category} meals:`, response.data.meals);
         })
         .catch(function (error) {
           console.error("API call error:", error);
           setError("Failed to fetch data. Please try again.");
           setMeals([]); // 清空数据
         })
         .finally(() => {
           setLoading(false);
         });
     }, [category]); // 依赖项：当category变化时重新运行effect
   
     // onClickHandler的实现将在下面两种解决方案中给出
   
     return (
       <div>
         <h1>分类食谱</h1>
         {/* 分类按钮/列表将在这里渲染 */}
         {loading && <p>加载中...</p>}
         {error && <p style={{ color: 'red' }}>{error}</p>}
         {!loading && !error && meals.length === 0 && category && <p>未找到 {category} 分类的食谱。</p>}
         {!loading && !error && meals.length > 0 && (
           <ul>
             {meals.map((meal: any) => (
               <li key={meal.idMeal}>{meal.strMeal}</li>
             ))}
           </ul>
         )}
       </div>
     );
   }
   
   export default CategoryFilter;

   登录后复制

   接下来，我们将介绍两种正确的解决方案来获取点击事件中的分类值。

   解决方案一：采用语义化的