React 中嵌套数组对象的实时搜索功能实现教程-js教程-PHP中文网

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

本文详解如何在 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 (
    <div>
      <input type="text" classname="head-1" placeholder="Search teams (e.g., 'Team 1B')" value="{searchTerm}" onchange="{(e)"> setSearchTerm(e.target.value)}
      />
      <div style="{{" margintop: fontfamily:>
        <h3>Search Results:</h3>
        {filteredGroups.length === 0 ? (
          <p>No matches found.</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11098" title="Node.js 可靠编程"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="Node.js 可靠编程" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11098" title="Node.js 可靠编程" class="overflowclass">Node.js 可靠编程</a>
													<p class="overflowclass">Node.js 可靠编程技能。避免事件循环阻塞、异步陷阱、ESM 兼容问题和内存泄漏。触发词：Node.js 开发、async/await、流处理、性能优化、安全编码。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill11098" title="Node.js 可靠编程" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
        ) : (
          <pre class="brush:php;toolbar:false;">{JSON.stringify(filteredGroups, null, 2)}

)} ); }

⚠️ 注意事项

不要修改原始 groups 数组：将其声明为常量（const groups = [...]），避免状态污染；
区分 filter 与 find：group.options.some(...) 更语义化地表达“该组中是否存在匹配项”，比 find(...) !== undefined 更清晰；
防空格与大小写：使用 trim() 和 toLowerCase() 提升用户体验；
性能优化：借助 useMemo 缓存计算结果，避免每次 render 都执行过滤逻辑；
无障碍友好：为添加 aria-label 或关联，提升可访问性。