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

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>}
      {!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;

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;

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 MealCategoryFilterWithDataAttribute() {
  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]);

  // 正确的事件处理函数，适用于 data-* 属性
  const onClickHandler = (e) => {
    // 使用 e.currentTarget.getAttribute 来获取 data-* 属性的值
    const selectedCategory = e.currentTarget.getAttribute("data-value");
    console.log("Setting category with data-value:", selectedCategory);
    setCategory(selectedCategory);
  };

  return (
    <div>
      <h1>选择食物类别 (使用 Data Attribute)</h1>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {/* 使用 data-value 属性 */}
        <li data-value="Seafood" onClick={onClickHandler} 
            style={{ cursor: 'pointer', padding: '10px 15px', border: '1px solid #ccc', margin: '5px', display: 'inline-block' }}>
          海鲜
        </li>
        <li data-value="Dessert" onClick={onClickHandler} 
            style={{ cursor: 'pointer', padding: '10px 15px', border: '1px solid #ccc', margin: '5px', display: 'inline-block' }}>
          甜点
        </li>
        <li data-value="Vegetarian" onClick={onClickHandler} 
            style={{ cursor: 'pointer', padding: '10px 15px', border: '1px solid #ccc', margin: '5px', display: 'inline-block' }}>
          素食
        </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 MealCategoryFilterWithDataAttribute;