React表格多交叉筛选后无法正常渲染更新问题求助

问题现象 #

开发React表格筛选功能时，点击Apply按钮无法同时应用口味（taste）、库存（availability）等多个下拉框的选中筛选条件，点击Cancel按钮也无法重置选项、更新表格渲染结果，筛选后行数据展示错误。
预期效果参考：

根因定位 #

• 筛选逻辑与下拉选择状态完全脱钩：原有过滤逻辑仅绑定行内Toggle开关的选中状态，从未读取三个下拉筛选器的选中值，根本没有接入下拉维度的判断规则
• 操作按钮未绑定事件：页面UI上实际展示的右上角Apply/Cancel按钮没有绑定任何点击事件，仅顶部隐藏的旧按钮绑定了逻辑，用户点击可见按钮无任何响应
• 交叉匹配规则缺失：未实现多筛选条件取交集的判断逻辑，尤其是库存维度要求「可用性=1、信任值=1」的交叉匹配规则完全缺失
• 重置逻辑不符合需求：原有Cancel逻辑仅操作行Toggle的选中状态，没有实现清空下拉选项、重置筛选条件恢复全量数据的功能

实现步骤 #

1. 重构筛选相关状态 #

拆分临时选择值和已生效筛选值，避免选择下拉选项时实时触发过滤，只有点击Apply后筛选才生效：

// 下拉框临时选中值（未点击Apply不生效）
const [tempFilters, setTempFilters] = useState({
  taste: [],
  comments: [],
  availability: []
});
// 已生效的筛选条件
const [activeFilters, setActiveFilters] = useState({
  taste: [],
  comments: [],
  availability: []
});

注：原有和行Toggle绑定的selected/hidden/rowSelectHandler/旧版handleClick等冗余逻辑可以直接删除，避免逻辑冲突。

2. 改造下拉选择器回调 #

统一处理三个下拉框的选中事件，实时同步临时筛选值：

const handleFilterSelect = (filterKey) => (selectedItems) => {
  // 提取选中项的value值
  const selectedValues = selectedItems
    .filter(item => item.selected)
    .map(item => item.value);
  setTempFilters(prev => ({
    ...prev,
    [filterKey]: selectedValues
  }));
};

对应修改三个下拉组件的onSelect绑定：

{/* 口味下拉 */}
<ListDrop
  placeholder={"Select"}
  items={taste}
  onSelect={handleFilterSelect('taste')}
  hasAll
/>
{/* 评论数下拉 */}
<ListDrop
  placeholder={"Select"}
  items={comments}
  onSelect={handleFilterSelect('comments')}
  hasAll
/>
{/* 可用性/信任下拉 */}
<ListDrop
  placeholder={"Select"}
  items={availability}
  onSelect={handleFilterSelect('availability')}
  hasAll
/>

3. 绑定Apply/Cancel按钮事件 #

实现应用筛选、重置筛选的逻辑，同时给右上角可见按钮绑定事件：

// 应用筛选：将临时选中值同步为生效筛选值
const handleApply = () => {
  setActiveFilters({...tempFilters});
};
// 重置筛选：清空所有选中值，恢复全量数据
const handleCancel = () => {
  const emptyFilters = { taste: [], comments: [], availability: [] };
  setTempFilters(emptyFilters);
  setActiveFilters(emptyFilters);
  // 同步重置下拉选项的选中状态
  setTaste(prev => prev.map(item => ({...item, selected: false})));
  setComments(prev => prev.map(item => ({...item, selected: false})));
  setAvailability(prev => prev.map(item => ({...item, selected: false})));
};

// 按钮绑定事件
<div className="flex justify-end gap-4 ">
  <div>
    <Button onClick={handleApply}>Apply</Button>
  </div>
  <div>
    <Button onClick={handleCancel}>Cancel</Button>
  </div>
</div>

4. 重写表格数据过滤逻辑 #

替换原有仅判断行隐藏状态的过滤规则，实现多维度交叉取交集的匹配逻辑：

const matchData = (
  match.find((el) => el._id_menu === menuId)?._ids ?? []
).filter((row) => {
  // 口味维度匹配
  if (activeFilters.taste.length && !activeFilters.taste.includes(row.taste)) {
    return false;
  }
  // 评论数维度匹配
  if (activeFilters.comments.length) {
    const rowComment = String(parseInt(row.comments, 10));
    if (!activeFilters.comments.includes(rowComment)) return false;
  }
  // 可用性+信任交叉维度匹配
  if (activeFilters.availability.length) {
    const isAvailabilityMatch = activeFilters.availability.includes('availability') 
      ? row.availability === 1 
      : true;
    const isTrustMatch = activeFilters.availability.includes('trust') 
      ? row.trust === 1 
      : true;
    if (!isAvailabilityMatch || !isTrustMatch) return false;
  }
  return true;
});

效果验证 #

修复后交互完全符合预期：

• 下拉框选择选项时不会实时过滤表格，避免选择过程中表格频繁跳动
• 点击Apply后，所有选中的筛选条件同时生效，表格返回所有维度都匹配的行数据
• 点击Cancel后，所有下拉选项重置为未选中状态，表格恢复展示全量数据
• 可用性、信任维度支持交叉筛选，同时选中两个选项时仅返回两个字段都为1的行

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