分类搜索下拉框怎么实现联动效果？

含含 Dev 提问于 2026-03-10 13:38:19 阅读 50

交互

我在做商品搜索页，想让用户先选分类再动态加载该分类下的品牌，但两个下拉框联动老是出问题。

我试过用 onChange 监听分类选择，然后发请求更新品牌列表，但页面会整个刷新，而且新选项没渲染出来。是不是哪里写错了？

const handleCategoryChange = (e) => {
  const categoryId = e.target.value;
  fetch(<code>/api/brands?category=${categoryId}</code>)
    .then(res => res.json())
    .then(data => setBrands(data)); // 这里 brands 状态没更新成功？
}

我来解答赞 7 收藏

反馈

1 条解答

Mc.爱慧 Lv1

问题很明显，你的代码逻辑没问题，但页面刷新是因为表单默认提交了。如果你用的是 form 包裹下拉框，记得阻止默认行为。

改成这样：

// 方式一：在 form 上阻止默认提交

const handleSearch = (e) => {

  e.preventDefault(); // 这行关键

  // 搜索逻辑

};



// render



  

  

  





// 方式二：把 button 改成 type="button"

另外建议用 async/await 写法，更清晰不容易出错：

const handleCategoryChange = async (e) => {

  const categoryId = e.target.value;

  

  // 选空分类时清空品牌

  if (!categoryId) {

    setBrands([]);

    return;

  }

  

  try {

    const res = await fetch(/api/brands?category=${categoryId});

    const data = await res.json();

    setBrands(data);

  } catch (err) {

    console.error('加载品牌失败', err);

  }

};

还有一个可能的坑：如果品牌列表渲染用的是旧数据，检查一下是不是依赖项没写对，或者在 useEffect 里监听 brands 变化做了多余操作。

现在改成 async/await 试试，基本就正常了。

2026-03-10 19:01