React 中嵌套数组对象的实时搜索功能实现教程 第1张

本文详解如何在 react 中为含多层结构（如分组 + 选项列表）的数据实现精准、可重置的搜索功能，支持按子项 label 模糊匹配，并保留原始分组结构，解决清空输入后无法恢复全量数据的问题。

在 React 应用中，对嵌套数据结构（例如分组对象数组，每组包含多个带 label 的选项）实现搜索功能时，常见误区是直接覆写原始数据源，导致清空搜索框后无法还原完整列表。正确做法是：始终保留原始数据（groups）不变，仅基于用户输入动态计算过滤结果；同时确保搜索逻辑能同时匹配 options.label 并保留对应 group.name 结构。

以下是完整、健壮的实现方案：

✅ 核心要点

  • 使用独立的 useState 存储原始数据（不可变）与搜索结果（派生状态）；
  • 搜索函数接收 event 参数，提取 event.target.value 进行大小写不敏感匹配；
  • 先 filter 出至少含一个匹配选项的分组，再 map 并精简其 options 列表；
  • 当搜索关键词为空字符串时，应返回全部原始分组（而非空数组），保证清空即恢复。

✅ 完整可运行代码示例

import React, { useState, useMemo } from "react";

const groups = [
  {
    name: "Male 9 A",
    options: [
      { label: "Team 1", selected: false },
      { label: "Team 2", selected: false },
      { label: "Team 3", selected: false },
      { label: "Team 4", selected: false },
      { label: "Team 5", selected: false }
    ]
  },
  {
    name: "Male 9 B",
    options: [
      { label: "Team 1B", selected: false },
      { label: "Team 2B", selected: false },
      { label: "Team 3B", selected: false },
      { label: "Team 4B", selected: false },
      { label: "Team 5B", selected: false }
    ]
  }
];

export default function App() {
  const [searchTerm, setSearchTerm] = useState("");

  // 使用 useMemo 缓存搜索结果，避免重复计算
  const filteredGroups = useMemo(() => {
    if (!searchTerm.trim()) return groups; // 清空时返回全部原始数据

    return groups
      .filter((group) =>
        group.options.some((player) =>
          player.label.toLowerCase().includes(searchTerm.toLowerCase())
        )
      )
      .map((group) => ({
        name: group.name,
        options: group.options.filter((player) =>
          player.label.toLowerCase().includes(searchTerm.toLowerCase())
        )
      }));
  }, [searchTerm, groups]);

  return (
    

       setSearchTerm(e.target.value)}
      />
      

        
Search Results:

        {filteredGroups.length === 0 ? (
          
No matches found.

							
        ) : (
          
{JSON.stringify(filteredGroups, null, 2)}

        )}
      
    
  );
}
⚠️ 注意事项


    

  • 
不要修改原始 groups 数组：将其声明为常量（const groups = [...]），避免状态污染；
    • 

  • 
区分 filter 与 find：group.options.some(...) 更语义化地表达“该组中是否存在匹配项”，比 find(...) !== undefined 更清晰；
    • 

  • 
防空格与大小写：使用 trim() 和 toLowerCase() 提升用户体验；
    • 

  • 
性能优化：借助 useMemo 缓存计算结果，避免每次 render 都执行过滤逻辑；
    • 

  • 
无障碍友好：为  添加 aria-label 或关联 

    • 



✅ 验证效果


    

  • 输入 "Team 1B" → 返回 [{ name: "Male 9 B", options: [{ label: "Team 1B", ... }] }]  
    • 

  • 输入 "team 2"（忽略大小写）→ 匹配 "Team 2" 和 "Team 2B"，分别归属不同组  
    • 

  • 清空输入框 → 自动还原全部两组原始数据  
    • 



通过以上实现，你将获得一个响应迅速、结构清晰、易于维护的嵌套数组搜索功能，适用于团队管理、多级筛选、配置面板等典型业务场景。