React表格默认设置Active过滤状态的实现问题

核心问题点 #

1. 初始状态未配置默认过滤：你没有给selectedValue1和filter1Fn设置默认的Active过滤逻辑，导致页面加载时仍按全量数据展示。
2. 过滤逻辑类型错误：isActive是数字类型，你使用了x.isActive.includes('0')——数字没有includes方法，这行代码会直接报错或不生效，导致过滤失效。
3. 空值分支逻辑混淆：你把下拉框空值（对应"全部"）的分支改成了过滤Active，和下拉选项的label含义冲突，逻辑混乱。

具体修复步骤 #

1. 设置初始筛选状态

在组件初始化（以React Hooks为例）时，直接配置默认的Active过滤：

import { useState } from 'react';

// 初始化状态：默认选中Active（value=0），默认过滤isActive=0的数据
const [selectedValue1, setSelectedValue1] = useState(0);
const [filter1Fn, setFilter1Fn] = useState({
  fn: items => items.filter(x => x.isActive === 0)
});

2. 修正筛选处理函数

重写handleFilterValue1，针对下拉选项做明确的数字比较，避免类型转换错误：

const handleFilterValue1 = e => { 
  const selectedVal = e.target.value;
  setSelectedValue1(selectedVal);
  
  let filterFunction;
  if (selectedVal === '') {
    // 空值：展示全部数据
    filterFunction = items => [...items];
  } else if (parseInt(selectedVal) === 0) {
    // Active：过滤isActive=0的记录
    filterFunction = items => items.filter(x => x.isActive === 0);
  } else if (parseInt(selectedVal) === 1) {
    // Inactive：过滤isActive=1的记录
    filterFunction = items => items.filter(x => x.isActive === 1);
  }
  
  setFilter1Fn({ fn: filterFunction });
};

3. 修正表格数据处理逻辑

确保传入过滤函数的是原始API数据，避免变量名混淆导致的二次过滤错误：

// 假设originalTableData是从API获取的原始全量数据
const dataFilteredAndSorted = () => {
  // 先执行搜索过滤，再执行状态过滤，最后排序
  const filteredData = filter1Fn.fn(searchFn.fn(originalTableData));
  return sortedData(filteredData, getComparator(order, orderBy));
};

关键说明 #

• 初始状态配置后，页面加载时会直接展示Active状态的数据，符合需求。
• 使用===直接比较数字类型的isActive，彻底避免了类型转换带来的潜在问题。
• 下拉选项的逻辑完全对应：空值展示全部、0展示Active、1展示Inactive，和下拉label的含义一致，逻辑清晰不易出错。

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