React表格多条件过滤组合时仅单条件生效问题排查

你的代码一共有4个核心错误，直接导致过滤逻辑不生效：

• 最直接的原因是错误使用&&拼接过滤结果：JS中逻辑与运算符&&的规则是，当前面的表达式为真值时，直接返回最后一个表达式的结果。你写的(apply过滤逻辑) && (showGood过滤逻辑)中，apply过滤返回的数组永远是真值，因此整个表达式最终只会返回最后面showGood过滤的结果，前面的apply过滤结果被直接丢弃，自然不会生效。
• applyStatus的更新逻辑完全无效：你在组件顶层直接判断menus.apply的值来更新状态，但menus是接口返回的菜单项数组，数组本身不存在apply属性（apply是每个数组元素的字段），因此menus.apply永远是undefined，这两段判断永远不会按你预期执行。同时在渲染流程中直接调用setState本身就是React的禁止写法，会触发重复渲染报错。
• 口味排序的useEffect造成死循环：你在依赖项为[menus]的effect中直接调用setMenus修改menus本身，会导致「menus更新→触发effect→修改menus→再次触发effect」的无限重渲染。
• 你提前定义了过滤手动隐藏行的matchData，但后续拼接过滤逻辑时没有基于matchData做叠加，等于手动隐藏行的逻辑也没有和其他过滤规则合并生效。

1. 删掉组件顶层那两段判断menus.apply调用setApplyStatus的无效代码。
2. 删掉会造成死循环的口味排序useEffect，把排序逻辑和所有过滤逻辑合并，在同一个数据集上链式叠加规则，不要用&&拼接独立的过滤结果。
3. 把传给Table的数据源改成统一处理后的结果，参考代码如下：

// 统一处理表格数据：按顺序叠加所有过滤、排序规则
let tableData = menus.filter(({ _id }) => !hidden[_id]); // 先过滤手动隐藏的行
if (!applyStatus) {
  tableData = tableData.filter(item => item.apply !== 1); // 叠加apply字段过滤
}
if (!showGood) {
  tableData = tableData.filter(item => item.taste !== "Good"); // 叠加口味过滤
}
// 叠加原来的排序逻辑：Good口味的项排前面
const goodItems = tableData.filter(item => item.taste === "Good");
const otherItems = tableData.filter(item => item.taste !== "Good");
tableData = [...goodItems, ...otherItems];

// 组件渲染部分直接传处理好的tableData即可
<Table
  data={tableData}
  initialState={initialState}
  withCellBorder
  withRowBorder
  withSorting
  withPagination
  rowProps={getRowProps}
/>

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