如何过滤嵌套元素并返回IconItems完整数据类型？

首先明确要处理的数据结构类型（以TypeScript为例）：

// 单个图标项类型
interface IconItem {
  title: string;
  provider: string;
  image: string;
  // 其他自定义属性
}

// 内层列表结构
interface IconList {
  id: string;
  name: string;
  items: IconItem[];
  // 其他自定义属性
}

// 顶层数据结构
type IconItems = {
  lists: IconList[];
};

你的问题核心是当前实现直接提取了过滤后的items数组，没保留外层IconList和顶层IconItems的完整结构。解决思路很明确：只替换每个list里的items数组，其他层级的结构完全保留。

具体实现代码 #

function filterIconItems(
  originalData: IconItems,
  searchQuery: string,
  filterKeyOpt: Array<'title' | 'provider' | 'image'>
): IconItems {
  // 搜索词为空时直接返回原数据
  if (!searchQuery.trim()) {
    return {...originalData};
  }
  const lowerCaseQuery = searchQuery.toLowerCase();

  return {
    ...originalData,
    lists: originalData.lists.map(list => ({
      ...list,
      // 过滤当前list下的items数组
      items: list.items.filter(item => {
        // 检查是否有指定字段匹配搜索词
        return filterKeyOpt.some(key => {
          const fieldValue = item[key].toLowerCase();
          return fieldValue.includes(lowerCaseQuery);
        });
      })
    }))
  };
}

关键细节说明 #

• 用扩展运算符...保留原数据所有属性，仅修改需要过滤的lists数组
• 对每个IconList，同样保留其原有属性，只替换items为过滤后的结果
• 统一转小写实现大小写不敏感的模糊匹配（不需要的话可以去掉toLowerCase()）
• 用filterKeyOpt.some()判断当前item是否有任意指定字段匹配搜索词
• 返回类型严格为IconItems，完全符合原结构要求

调用示例 #

// 模拟原始数据
const rawData: IconItems = {
  lists: [
    {
      id: 'list1',
      name: '常用图标',
      items: [
        {title: 'Home', provider: 'AntDesign', image: '/home.svg'},
        {title: 'Settings', provider: 'MaterialUI', image: '/settings.svg'}
      ]
    }
  ]
};

// 搜索"ant"，匹配title和provider字段
const filteredData = filterIconItems(rawData, 'ant', ['title', 'provider']);
// 返回结果与rawData结构完全一致，仅items保留匹配项

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