React + MUI表格过滤异常：添加行后过滤失效问题求助

问题描述 #

在React和MUI开发的表格场景中，存在以下过滤异常：

• 页面加载后直接过滤未新增行的表格，功能正常；
• 先点击"Add new rule"添加空白行，再执行过滤操作时功能失效：筛选"Attribute等于products"时，预期显示对应数据行，实际仅显示新增的空白行。

复现步骤 #

• 页面加载后点击"Add new rule"按钮添加空白行；
• 点击筛选按钮打开筛选菜单；
• 在Columns字段选择"Attribute"，Operator字段选择"Equals"，Value字段输入"products"。

问题根源 #

1. 操作符大小写不匹配：筛选时传入的操作符是Equals（首字母大写），但operatorFunctions中定义的键是小写的equals，导致operatorFunctions.has(operator)返回false，过滤条件直接返回false，正常数据行被错误过滤。
2. 未处理undefined值：新增空白行的Attribute字段为undefined，调用toString()后转为字符串"undefined"，过滤逻辑未排除这种情况，导致空白行意外保留。

解决方案 #

方案1：统一操作符大小写 #

在过滤函数中将传入的操作符转为小写，确保与operatorFunctions的键匹配：

const operatorFunctions = new Map([
  [
    "equals",
    (dataValue, value) => dataValue?.toLowerCase() === value?.toLowerCase()
  ],
  [
    "starts_with",
    (dataValue, value) =>
      dataValue?.toLowerCase().startsWith(value?.toLowerCase())
  ]
]);

export const customFilter = (filter, data) => {
  if (!data) return [];

  return data.filter((row) =>
    filter.every(({ value = "", operator = "", columns = "" }) => {
      if (!value) return true;
      // 将操作符转为小写，匹配Map中的键
      const normalizedOperator = operator.toLowerCase();
      if (!operatorFunctions.has(normalizedOperator)) return false;
      return operatorFunctions.get(normalizedOperator)(row[columns]?.toString(), value);
    })
  );
};

方案2：排除undefined值 #

在操作符函数中判断数据值是否为undefined，直接返回false避免空白行被保留：

const operatorFunctions = new Map([
  [
    "equals",
    (dataValue, value) => {
      // 数据值为undefined时直接不匹配
      if (dataValue === undefined) return false;
      return dataValue.toLowerCase() === value.toLowerCase();
    }
  ],
  [
    "starts_with",
    (dataValue, value) => {
      if (dataValue === undefined) return false;
      return dataValue.toLowerCase().startsWith(value.toLowerCase());
    }
  ]
]);

export const customFilter = (filter, data) => {
  if (!data) return [];

  return data.filter((row) =>
    filter.every(({ value = "", operator = "", columns = "" }) => {
      if (!value) return true;
      const normalizedOperator = operator.toLowerCase();
      if (!operatorFunctions.has(normalizedOperator)) return false;
      return operatorFunctions.get(normalizedOperator)(row[columns], value);
    })
  );
};

验证 #

修改后重新执行复现步骤：添加空白行后执行筛选操作，正常数据行（Attribute为products）会被正确保留，空白行因不满足过滤条件被过滤，符合预期。

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