如何使用useEffect调用ID并实现下拉框切换加载对应分类产品？

先梳理你当前代码的几个问题： #

1. getproductlist里错误地把产品数据更新到了分类状态（setCategory），应该用独立的产品列表状态
2. 调用产品接口时没传入分类ID，也没在请求URL中使用该ID，无法实现分类过滤产品的逻辑
3. useEffect依赖为空数组，不会监听分类选中状态的变化，切换分类时不会触发产品加载
4. 重复调用了getproductlist，还添加了没必要的延迟定时器

完整实现步骤： #

1. 定义必要的状态变量

首先得有分类列表、产品列表、选中的分类ID这几个核心状态：

const [category, setCategory] = useState([]);
const [productList, setProductList] = useState([]);
const [selectedCategoryId, setSelectedCategoryId] = useState(null);
const [fetchError, setFetchError] = useState(null);

2. 修正分类加载函数

页面初始化时加载所有分类，还可以默认选中第一个分类（可选）：

const getCategory = async () => {
  try {
    const res = await fetch("http://localhost:5000/PortfolioGroup");
    if (!res.ok) throw Error('获取分类失败');
    const data = await res.json();
    setCategory(data);
    // 默认选中第一个分类（可选逻辑）
    if (data.length > 0) setSelectedCategoryId(data[0].id);
    setFetchError(null);
  } catch (err) {
    setFetchError(err.message);
  }
};

3. 修正产品加载函数

根据传入的分类ID请求对应产品，注意要更新产品列表状态：

const getProductList = async (portfolioId) => {
  // 未选中分类时直接返回，避免无效请求
  if (!portfolioId) return;
  
  try {
    // 把分类ID拼接到请求URL中，后端接口需支持按分类ID查询产品
    // 接口格式根据后端实际情况调整，比如REST风格可能是 `/manasa/${portfolioId}`
    const res = await fetch(`http://localhost:5000/manasa?portfolioId=${portfolioId}`);
    if (!res.ok) throw Error('获取产品失败');
    const data = await res.json();
    setProductList(data); // 这里更新产品列表，而非分类状态！
    setFetchError(null);
  } catch (err) {
    setFetchError(err.message);
  }
};

4. 用useEffect实现自动加载逻辑

• 页面挂载时加载分类列表：

useEffect(() => {
  getCategory();
}, []); // 空数组仅在组件挂载时执行一次

• 监听选中分类ID的变化，自动加载对应产品：

useEffect(() => {
  getProductList(selectedCategoryId);
}, [selectedCategoryId]); // 只要选中的分类ID改变，就重新加载产品

5. 编写下拉框UI

将两个下拉框与状态绑定，处理切换事件：

{/* 错误提示 */}
{fetchError && <p style={{color: 'red'}}>{fetchError}</p>}

{/* 分类下拉框 */}
<select 
  value={selectedCategoryId || ''}
  onChange={(e) => setSelectedCategoryId(e.target.value)}
>
  <option value="">请选分类</option>
  {category.map(item => (
    <option key={item.id} value={item.id}>
      {item.name}
    </option>
  ))}
</select>

{/* 产品下拉框，未选分类时禁用 */}
<select disabled={!selectedCategoryId}>
  <option value="">请选产品</option>
  {productList.map(item => (
    <option key={item.id} value={item.id}>
      {item.name}
    </option>
  ))}
</select>

关键提醒 #

• 务必和后端确认产品接口的传参方式，确保能通过分类ID获取对应产品列表
• 不要添加没必要的setTimeout，除非有特殊的延迟加载需求
• 处理好未选中分类时的状态，比如禁用产品下拉框，避免无效请求

内容的提问来源于stack exchange，提问作者Manasa H R