React中如何使用Hooks在抽屉关闭时重置组件本地状态？

实现方案 #

1. 先封装独立的筛选状态重置函数，统一把所有筛选状态重置为定义时的初始值：

const resetFilters = () => {
  setSearchQuery("")
  setCount(1)
  setCheckedFilters([])
}

2. 将重置函数绑定到抽屉的关闭回调上即可，以Ant Design的Drawer组件为例写法如下：

<Drawer
  title="活动筛选"
  open={drawerVisible}
  onClose={() => {
    resetFilters()
    setDrawerVisible(false) // 原有控制抽屉关闭的逻辑
  }}
>
  {/* 抽屉内的筛选表单内容 */}
</Drawer>

额外注意点 #

你当前贴出的useMemo筛选逻辑还没有加入checkedFilters（活动类型）的过滤规则，需要补全对应逻辑，否则活动类型的筛选不会生效，补全后的参考代码：

const activities = useMemo(() => {
  return allActivities.filter(
    (item) =>
      item.participants >= count &&
      item.activity.toLowerCase().includes(searchQuery) &&
      // 新增活动类型过滤：无选中类型时全部通过，有选中时匹配对应类型
      (checkedFilters.length === 0 || checkedFilters.includes(item.type))
  );
}, [count, searchQuery, checkedFilters, allActivities]);

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