如何在嵌套结构中按人员姓名高效过滤分组数据-js教程-PHP中文网

如何在嵌套结构中按人员姓名高效过滤分组数据

本文详解如何在具有多层嵌套（group → fields → name）的 json 数据中，基于用户输入实时筛选包含指定姓名的分组，并仅保留匹配的字段，兼顾性能与可读性。

本文详解如何在具有多层嵌套（group → fields → name）的 json 数据中，基于用户输入实时筛选包含指定姓名的分组，并仅保留匹配的字段，兼顾性能与可读性。

在实际开发中，我们常需对层级化配置数据（如分组表单、权限面板等）实现动态搜索。本例中，原始数据由多个 Group 对象组成，每个 Group 包含 label 和 fields 数组；而 fields 中每个对象又含有 name 字段——目标是：当用户在搜索框输入姓名（如 "Mike"）时，仅显示包含该姓名的 Group，并且每个 Group 内只保留匹配的 field 项。

关键难点在于：不能仅用 filter() 判断整个 Group 是否“存在匹配”，还需对 fields 进行二次精简。以下是推荐的实现方案（基于 React + TypeScript）：

✅ 正确的数据处理逻辑

使用 map() 遍历每个 Group，先对其 fields 执行过滤（保留 name 包含搜索关键词的项），再用 filter() 剔除 fields 为空的 Group：

useEffect(() => {
  if (value.trim() === "") {
    setSearchResults(originalPosts);
    return;
  }

  const keyword = value.toLowerCase().trim();
  const filtered = originalPosts
    .map(group => ({
      ...group,
      fields: group.fields.filter(field =>
        field.name?.toLowerCase().includes(keyword)
      )
    }))
    .filter(group => group.fields.length > 0);

  setSearchResults(filtered);
}, [value, originalPosts]);

? 注意：使用 .includes() 比 .match() 更简洁直观，且避免正则潜在异常；同时添加 ?. 可选链和 trim() 防止空格干扰。

? SearchBar 组件轻量化改造

SearchBar 应专注输入交互，不持有状态或处理逻辑：

interface SearchBarProps {
  onChange: (e: React.ChangeEvent<htmlinputelement>) => void;
}

const SearchBar: React.FC<searchbarprops> = ({ onChange }) => (
  <header classname="search-bar"><form onsubmit="{e"> e.preventDefault()}>
      <input type="text" placeholder="Search by name..." onchange="{onChange}" aria-label="Search people by name">
</form>
  </header>
);</searchbarprops></htmlinputelement>

父组件通过 useState 管理搜索值，并将 setValue 包装为 onChange 回调传入：

const [searchValue, setSearchValue] = useState<string>("");

<searchbar onchange="{(e)"> setSearchValue(e.target.value)} /></searchbar></string>

⚠️ 重要注意事项

性能优化建议：若数据量大或后续对接后端 API，务必引入防抖（debounce）。可使用 lodash.debounce 或自定义 hook，避免高频触发重渲染。
大小写处理：统一转为小写比较，提升用户体验（如输入 mike 也能匹配 Mike）。
空值防护：field.name?.toLowerCase() 防止 name 为 undefined 或 null 导致运行时错误。
无结果提示：可在渲染结果前增加判断，例如 searchResults.length === 0 &&
No person found.
，增强 UI 友好性。

✅ 最终渲染示例（JSX 片段）

{searchResults.map((group) => (
  <div key="{group.label}" classname="group">
    <h3>{group.label}</h3>
    <ul>
      {group.fields.map((field, idx) => (
        <li key="{idx}">{field.name}</li>
      ))}
    </ul>
</div>
))}

这样，输入 "Mike" 后，将精准展示：