React中如何通过点击不同分类使用Axios发起API请求？

问题描述 #

点击分类列表项（<li>）时触发API调用，但控制台仅输出null，无法加载对应分类的内容。

核心问题 #

<li>不是表单控件，它的value属性不会被浏览器识别为可通过e.target.value获取的有效值，导致点击时setCategory设置的是undefined或无效值，最终API请求的URL不正确，返回null。

修复方案 #

方案1：直接在点击事件中传递分类值

修改点击事件处理函数，直接传入目标分类字符串，避免依赖e.target.value：

const [category, setCategory] = useState("");

useEffect(() => {
  // 初始空值时不发起请求
  if (!category) return;
  
  axios
    .get(`${url}${category}`)
    .then((response: any) => {
      console.log(response.data.meals);
    })
    .catch((error: any) => {
      console.log(error);
    });
}, [category]);

// 直接接收分类参数
const onClickHandler = (selectedCategory: string) => {
  setCategory(selectedCategory);
};

对应的<li>写法：

<li onClick={() => onClickHandler("Seafood")}>
  Seafood
</li>

方案2：使用自定义data-*属性

利用HTML自定义数据属性存储分类值，在事件处理中通过dataset获取：

const onClickHandler = (e: any) => {
  // 通过dataset获取自定义属性值
  const selectedCategory = e.target.dataset.value;
  setCategory(selectedCategory);
};

对应的<li>写法：

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

额外优化 #

在useEffect中增加空值判断，避免初始状态（category为空字符串）时发起无效请求，减少不必要的API调用。

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