React中实现点击事件动态调用API：Axios与事件处理的最佳实践

许多开发者在尝试通过点击列表项（

问题的根源在于

）中当前列表项的序数。它仅适用于
内部的
1. ，且其值必须是一个数字，用于指定列表项的起始编号。因此，将字符串（如"Seafood"）赋值给
2. 的value属性，并期望通过e.target.value获取，是行不通的。

   考虑以下简化后的代码示例，它展示了这种常见的误用：

   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
   
   function MealCategoryFilter() {
     const [category, setCategory] = useState("");
     const [meals, setMeals] = useState([]);
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(false);
   
     useEffect(() => {
       if (category) { // 只有当category不为空时才发起请求
         setLoading(true);
         setError(null);
         axios.get(`${API_BASE_URL}${category}`)
           .then(response => {
             setMeals(response.data.meals || []); // API可能返回null
             console.log(`Fetched ${category} meals:`, response.data.meals);
           })
           .catch(err => {
             console.error("Error fetching data:", err);
             setError("Failed to load meals. Please try again.");
             setMeals([]);
           })
           .finally(() => {
             setLoading(false);
           });
       } else {
         setMeals([]); // 清空列表，如果category为空
       }
     }, [category]);
   
     // 错误的事件处理函数
     const onClickHandler = (e) => {
       // e.target.value 在 <li> 上会返回 null
       console.log("Attempting to set category with value:", e.target.value);
       setCategory(e.target.value);
     };
   
     return (
       <div>
         <h1>选择食物类别</h1>
         <ul>
           {/* 错误的用法 */}
           <li value="Seafood" onClick={onClickHandler}>
             海鲜
           </li>
           <li value="Dessert" onClick={onClickHandler}>
             甜点
           </li>
           {/* ...更多类别 */}
         </ul>
   
         {loading && <p>加载中...</p>}
         {error && <p style={{ color: 'red' }}>{error}</p>}
         {!loading && !error && meals.length === 0 && category && <p>未找到 {category} 类别食物。</p>
                       <div class="aritcle_card">
                           <a class="aritcle_card_img" href="/ai/1702">
                               <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d388a5cce210.png" alt="Dream Machine">
                           </a>
                           <div class="aritcle_card_info">
                               <a href="/ai/1702">Dream Machine</a>
                               <p>Dream Machine 是由 Luma AI 开发的一款 AI 视频生成工具，可以快速将文本和图像转换为高质量的视频内容。</p>
                               <div class="">
                                   <img src="/static/images/card_xiazai.png" alt="Dream Machine">
                                   <span>165</span>
                               </div>
                           </div>
                           <a href="/ai/1702" class="aritcle_card_btn">
                               <span>查看详情</span>
                               <img src="/static/images/cardxiayige-3.png" alt="Dream Machine">
                           </a>
                       </div>
                   }
         {!loading && !error && meals.length > 0 && (
           <div>
             <h2>{category} 食物</h2>
             <ul>
               {meals.map(meal => (
                 <li key={meal.idMeal}>{meal.strMeal}</li>
               ))}
             </ul>
           </div>
         )}
       </div>
     );
   }
   
   export default MealCategoryFilter;

   登录后复制

   在上述代码中，当点击

3. 元素时，onClickHandler中的e.target.value将无法获取到"Seafood"或"Dessert"，从而导致category状态被设置为空字符串，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=";

function MealCategoryFilterWithButton() {
  const [category, setCategory] = useState("");
  const [meals, setMeals] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (category) {
      setLoading(true);
      setError(null);
      axios.get(`${API_BASE_URL}${category}`)
        .then(response => {
          setMeals(response.data.meals || []);
          console.log(`Fetched ${category} meals:`, response.data.meals);
        })
        .catch(err => {
          console.error("Error fetching data:", err);
          setError("Failed to load meals. Please try again.");
          setMeals([]);
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      setMeals([]);
    }
  }, [category]);

  // 正确的事件处理函数，适用于 <button>
  const onClickHandler = (e) => {
    // 对于 button 元素，e.target.value 可以正确获取其 value 属性
    console.log("Setting category with value from button:", e.target.value);
    setCategory(e.target.value);
  };

  return (
    <div>
      <h1>选择食物类别 (使用 Button)</h1>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        <li style={{ display: 'inline-block', margin: '5px' }}>
          <button value="Seafood" onClick={onClickHandler} style={{ padding: '10px 15px' }}>
            海鲜
          </button>
        </li>
        <li style={{ display: 'inline-block', margin: '5px' }}>
          <button value="Dessert" onClick={onClickHandler} style={{ padding: '10px 15px' }}>
            甜点
          </button>
        </li>
        <li style={{ display: 'inline-block', margin: '5px' }}>
          <button value="Vegetarian" onClick={onClickHandler} style={{ padding: '10px 15px' }}>
            素食
          </button>
        </li>
      </ul>

      {loading && <p>加载中...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {!loading && !error && meals.length === 0 && category && <p>未找到 {category} 类别食物。</p>}
      {!loading && !error && meals.length > 0 && (
        <div>
          <h2>{category} 食物</h2>
          <ul>
            {meals.map(meal => (
              <li key={meal.idMeal}>{meal.strMeal}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

export default MealCategoryFilterWithButton;

使用

注意事项与最佳实践

1. HTML语义化： 优先使用语义正确的HTML元素。如果一个元素是用于触发行为的，

• e.target指向实际触发事件的元素（例如，如果你点击了一个按钮内部的，e.target就是）。
• e.currentTarget指向事件监听器所附着的元素（例如，如果你在按钮上监听点击事件，无论点击按钮的哪个部分，e.currentTarget始终是按钮本身）。
• 在处理data-*属性时，使用e.currentTarget更为健壮，尤其当可点击区域内部有其他子元素时。