React中JSON搜索过滤器无法筛选子对象问题

你当前的代码只检查了顶层节点的名称，没有递归遍历子节点，所以无法匹配到子对象。要实现包含子节点的搜索过滤，需要编写一个递归函数来处理整个树形结构，同时保留匹配节点的层级关系。

完整修改后的代码 #

import Sidebaritems from "./Sidebaritems";
import data from "../data.json";
import { useState } from "react";

// 递归过滤树形数据的函数
const filterTreeData = (items, searchTerm) => {
  if (!searchTerm) return items;

  const lowerSearch = searchTerm.toLowerCase();

  return items.reduce((acc, item) => {
    // 检查当前节点是否匹配
    const isMatch = item.name.toLowerCase().includes(lowerSearch);
    // 递归过滤子节点
    const filteredChildren = filterTreeData(item.children || [], lowerSearch);
    // 如果当前节点匹配，或者子节点有匹配结果，就保留该节点
    if (isMatch || filteredChildren.length > 0) {
      acc.push({
        ...item,
        // 替换为过滤后的子节点
        children: filteredChildren
      });
    }
    return acc;
  }, []);
};

export default function Sidebar() {
  const [search, setSearch] = useState("");
  
  // 使用递归过滤函数处理数据
  const filteredData = filterTreeData(data, search);

  return (
    <div className="sidebar">
      <input
        className="search"
        type="text"
        onChange={(e) => setSearch(e.target.value)}
        placeholder="搜索..."
      />
      {filteredData.map((item, index) => (
        <Sidebaritems key={index} item={item} search={search} />
      ))}
    </div>
  );
}

代码说明 #

1. 递归过滤函数 filterTreeData

   • 接收原始数据数组和搜索关键词作为参数
   • 如果搜索关键词为空，直接返回原始数据
   • 使用reduce遍历每个节点：
     • 先检查当前节点名称是否匹配搜索词
     • 递归处理当前节点的children，得到过滤后的子节点数组
     • 如果当前节点匹配，或者子节点有匹配结果，就将该节点（包含过滤后的子节点）加入结果数组

2. Sidebar组件修改

   • 调用filterTreeData处理原始数据，得到过滤后的树形结构
   • 渲染时使用过滤后的数据，这样不仅顶层匹配的节点会显示，子节点匹配时，其父节点也会被保留并只显示匹配的子节点分支

注意事项 #

• 确保你的Sidebaritems组件能够正确处理带有过滤后children的节点，比如当children数组不为空时渲染子项
• 如果JSON数据中存在children为undefined的情况，函数里的item.children || []会处理这种边界情况

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