React如何实现同组选值OR、跨组选值AND的动态筛选逻辑？

核心规则落地逻辑：同组内选项做OR匹配，跨分组做AND匹配；未选中任何选项的分组不参与筛选，不做条件限制。
原有代码的问题是将所有筛选条件全部用||（或逻辑）连接，只要满足任意一个条件就会命中，完全没有做分组隔离，无法实现跨组必须同时满足的要求。

实现步骤 #

• 拆分每个筛选维度为独立的判断单元，每个单元单独计算当前房源是否符合该组的选中规则
• 对每个判断单元增加空选中校验：如果该组没有用户选中的任何筛选项，直接判定该单元校验通过，不对结果做限制
• 将所有分组单元的校验结果用&&（与逻辑）连接，只有所有有选中值的分组全部校验通过，才保留对应房源

可直接复用的实现代码 #

var filterArray = PropertyData
? PropertyData
    // 先按规则过滤符合条件的房源
    .filter((property) => {
      // 房源字段预处理
      let DirectionArr = property.direction.split(",");
      let propertyPrice = parseInt(property.price.replace(/,/g, ""));
      let propertySqft = parseInt(property.sqft);

      // 1. 卧室分组：组内OR，无选中则不限制
      const bedroomPass = UnitFilterBedroomOnArr.length === 0
        ? true
        : UnitFilterBedroomOnArr.includes(property.bedroom);

      // 2. 卫生间分组：组内OR，无选中则不限制
      const bathroomPass = UnitFilterBathroomOnArr.length === 0
        ? true
        : UnitFilterBathroomOnArr.includes(property.bathroom);

      // 3. 价格区间分组：区间校验，未设置有效区间则不限制
      const pricePass = UnitFilterPriceRangeMin < UnitFilterPriceRangeMax
        ? propertyPrice >= UnitFilterPriceRangeMin && propertyPrice <= UnitFilterPriceRangeMax
        : true;

      // 4. 面积区间分组：区间校验，未设置有效区间则不限制
      const sqftPass = UnitFilterUnitSqftRangeMin < UnitFilterUnitSqftRangeMax
        ? propertySqft >= UnitFilterUnitSqftRangeMin && propertySqft <= UnitFilterUnitSqftRangeMax
        : true;

      // 5. 朝向分组：组内OR，无选中朝向则不限制
      const checkedDirectionList = [
        { isChecked: KeyplanFilterNorthState, value: DirectionStatusEnum.North },
        { isChecked: KeyplanFilterSouthState, value: DirectionStatusEnum.South },
        { isChecked: KeyplanFilterEastState, value: DirectionStatusEnum.East },
        { isChecked: KeyplanFilterWestState, value: DirectionStatusEnum.West }
      ].filter(item => item.isChecked);
      const directionPass = checkedDirectionList.length === 0
        ? true
        : checkedDirectionList.some(item => DirectionArr.includes(item.value));

      // 6. 售卖状态分组：组内OR，无选中状态则不限制
      const checkedStatusList = [
        { isChecked: UnitFilterSellingStatusForSale, value: SellingStatusEnum.ForSale },
        { isChecked: UnitFilterSellingStatusSold, value: SellingStatusEnum.Sold },
        { isChecked: UnitFilterSellingStatusNotAvailable, value: SellingStatusEnum.NotAvailable }
      ].filter(item => item.isChecked);
      const statusPass = checkedStatusList.length === 0
        ? true
        : checkedStatusList.some(item => property.status === item.value);

      // 跨组AND逻辑：所有分组校验通过才保留房源
      return bedroomPass && bathroomPass && pricePass && sqftPass && directionPass && statusPass;
    })
    // 过滤完成后提取需要的房源id
    .map(property => property.modelUnitId)
: "";

逻辑校验说明 #

• 单组多选场景：比如同时选中2居、3居，其他分组无选中，其余分组校验默认通过，只要房源卧室数是2或3就会命中，符合同组OR规则
• 多组选中场景：比如同时选中3居、2卫、可售状态，三个分组必须同时校验通过才会命中房源，符合跨组AND规则
• 无任何选中场景：所有分组校验默认通过，返回全部房源，符合常规交互预期

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