React Hook“useCategory”无法在回调内调用

React Hook是React 16.8版本引入的一种新的特性，它可以让我们在函数组件中使用状态和其他React特性，而不需要编写类组件。React Hook的出现极大地简化了React组件的编写和维护过程，使得开发者能够更加专注于组件的逻辑和功能实现。然而，在使用React Hook的过程中，我们可能会遇到一些限制和注意事项，其中之一就是在回调函数内使用Hook时会出现问题。

javascript
import React, { useState } from 'react';
const CategoryComponent = () => {
  const [category, setCategory] = useState('');
  const handleCategoryChange = (event) => {
    setCategory(event.target.value);
    fetchProductsByCategory(event.target.value); // 这里调用了一个自定义的获取商品数据的函数
  };
  return (
    
      
        请选择分类
        服装
        电子产品
        图书
      
      {/* 显示商品列表的代码 */}
    
  );
};
export default CategoryComponent;

javascript
import React, { useState, useEffect } from 'react';
const CategoryComponent = () => {
  const [category, setCategory] = useState('');
  useEffect(() => {
    fetchProductsByCategory(category); // 在每次category状态更新时调用fetchProductsByCategory函数
  }, [category]);
  const handleCategoryChange = (event) => {
    setCategory(event.target.value);
  };
  return (
    
      
        请选择分类
        服装
        电子产品
        图书
      
      {/* 显示商品列表的代码 */}
    
  );
};
export default CategoryComponent;