React中使用Lodash多条件过滤时，空值过滤项的异常问题

我之前也踩过一模一样的坑！这种空值过滤逻辑的细节很容易被忽略，咱们直接来搞定它：

问题根源 #

当buildingType留空时，你当前的代码会让_.indexOf(item.buildingTypes, '')去执行匹配——但这根本不是你想要的效果，你真正需要的是：当过滤条件为空时，不对buildingType做任何限制，直接保留所有符合其他条件的项。

修复方案 #

只需要在buildingType的过滤逻辑里加一个空值判断，当条件为空时直接跳过这个过滤规则即可。假设你原来的过滤函数是这样的：

const filteredObjects = allObjects.filter(obj => {
  // 前三个有默认值的过滤条件（正常工作）
  const matchesA = obj.propertyA === filterConditions.propertyA;
  const matchesB = obj.propertyB === filterConditions.propertyB;
  const matchesC = obj.propertyC === filterConditions.propertyC;
  // 有问题的buildingType过滤
  const matchesBuilding = _.indexOf(obj.buildingTypes, filterConditions.buildingType) !== -1;

  return matchesA && matchesB && matchesC && matchesBuilding;
});

修改后：

const filteredObjects = allObjects.filter(obj => {
  const matchesA = obj.propertyA === filterConditions.propertyA;
  const matchesB = obj.propertyB === filterConditions.propertyB;
  const matchesC = obj.propertyC === filterConditions.propertyC;
  // 新增空值判断：如果buildingType为空，直接返回true（不限制），否则执行原匹配逻辑
  const matchesBuilding = !filterConditions.buildingType || _.indexOf(obj.buildingTypes, filterConditions.buildingType) !== -1;

  return matchesA && matchesB && matchesC && matchesBuilding;
});

更健壮的空值判断（可选） #

如果你的buildingType空值可能是null、undefined或者空字符串，建议用更明确的判断：

// 匹配null/undefined/空字符串的情况
const matchesBuilding = (filterConditions.buildingType == null || filterConditions.buildingType === '') 
  || _.indexOf(obj.buildingTypes, filterConditions.buildingType) !== -1;

或者用Lodash自带的_.isEmpty()来统一判断空值：

const matchesBuilding = _.isEmpty(filterConditions.buildingType) 
  || _.indexOf(obj.buildingTypes, filterConditions.buildingType) !== -1;

核心思路 #

过滤逻辑的原则是：当某个过滤条件未设置（空值）时，该条件不参与过滤，不对结果产生限制。这样就能避免空值进入匹配逻辑导致的异常结果了。

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