React-Native数组对象按标签过滤异常问题求助

问题背景 #

React Native项目中，后端返回按年份分组的事件数据，每个事件的tags字段为逗号分隔的字符串（支持单/多标签）。需求是按用户选择的多个标签过滤数据，但现有代码仅能匹配最后选中的标签，无法实现多标签匹配。

示例数据 #

{"2010":[{"id":1243,"eventName":"sample_01","categoryType":"CUSTOM_NOTES","tags":"tag19","lastModified":"2022-10-04T14:31:32Z","attachments":[]}],"2022":[{"id":1244,"eventName":"sample_02","categoryType":"CUSTOM_NOTES","tags":"tag1, tag12, tag3, tag52, tag19","lastModified":"2022-10-04T14:31:32Z","attachments":[]},{"id":1245,"eventName":"hello_03","categoryType":"CUSTOM_NOTES","tags":"tag1, tag12","lastModified":"2022-10-04T14:31:32Z","attachments":[]}]}

传入的过滤参数结构 #

[{"filterType":"Tag","data":["tag1","tag12"]},{"filterType":"Attachments","data":[]}]

现有代码问题 #

• 循环中每次都会覆盖advancedFilterFn，最终仅保留最后一个标签的过滤逻辑
• 过滤函数内的return会在第一次循环时终止，无法检查事件的所有标签

修复后的代码 #

FilterByTagsOrAttachements = (advancedFilterData) => {
  // 收集所有需要匹配的标签
  const tagFilters = advancedFilterData.find(item => item.filterType === "Tag")?.data || [];
  
  // 构建多标签过滤逻辑
  const advancedFilterFn = (event) => {
    // 将事件标签转为去重、去空格的集合，提升匹配效率
    const eventTags = new Set(event.tags.split(',').map(tag => tag.trim()));
    // 检查所有选中标签是否都存在于事件标签中（如需"包含任意一个"，将every改为some）
    return tagFilters.every(tag => eventTags.has(tag));
  };

  // 附件过滤逻辑可在此补充（示例仅打印参数）
  const attachmentFilter = advancedFilterData.find(item => item.filterType === "Attachments")?.data || [];
  if (attachmentFilter.length > 0) {
    console.log('处理附件过滤:', attachmentFilter);
  }

  this.onCreateAdvancedFilterObject(advancedFilterFn);
}

onCreateAdvancedFilterObject = (advancedFilterFn) => {
  this.setState(state => {
    const events = {};
    for (const [year, items] of Object.entries(state.events)) {
      // 无过滤条件时返回原数组，避免空过滤导致数据丢失
      events[year] = advancedFilterFn ? items.slice().filter(advancedFilterFn) : items.slice();
    }
    return { events };
  });
}

关键修改说明 #

1. 一次性收集标签：先提取所有需要匹配的标签，避免循环覆盖过滤函数
2. 标签预处理：拆分事件标签时去除空格，转为Set类型提升匹配效率
3. 多标签匹配逻辑：
   • 用every()实现**“同时包含所有选中标签”**的过滤（示例中会保留sample_02和hello_03）
   • 若需**“包含任意一个选中标签”**，将every()替换为some()
4. 兼容无过滤场景：增加判断，避免无过滤条件时误过滤数据

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