React多层级Accordion搜索时深层subLayer子项不显示问题修复

当前filteredData采用的浅层级过滤逻辑没有做全层级匹配向上传递：仅判断当前节点、直接二级子节点是否命中搜索关键词，未递归校验三级及更深层级的匹配状态，导致三级节点命中关键词时，其对应的二级、顶层祖先节点被判定为「无匹配子项」，整条分支被错误过滤。

• 搜索顶层「Computer Science」、二级「Programming Language」时：节点自身或直接子节点命中判定逻辑，分支被正常保留展示
• 搜索三级「HTML」「CSS」时：
  • 三级节点本身命中关键词，但二级节点的过滤逻辑未遍历自身子节点（三级）的匹配结果
  • 顶层节点无法感知到二级节点下存在匹配的三级内容
  • 整条层级链路被判定为无匹配项，最终被过滤不展示

核心修复思路：实现深度优先的递归过滤函数，任意子层级命中关键词时，保留整条祖先链路，且仅保留命中内容所在的子分支，兼容任意深度的嵌套层级。

1. 先定义通用递归过滤方法

const filterNestedLayers = (layerList, keyword) => {
  // 搜索关键词为空时返回原始全量数据
  if (!keyword.trim()) return layerList;
  const formatKeyword = keyword.toLowerCase();

  return layerList.reduce((result, currentItem) => {
    // 校验当前节点名称是否匹配
    const selfMatch = currentItem.name.toLowerCase().includes(formatKeyword);
    // 递归处理当前节点的所有子层级，自动覆盖三级、四级等任意嵌套深度
    const matchedSub = currentItem.subLayer 
      ? filterNestedLayers(currentItem.subLayer, keyword)
      : [];
    
    // 当前节点自身匹配 或 存在匹配的子节点时，保留该节点，子节点替换为过滤后的匹配分支
    if (selfMatch || matchedSub.length > 0) {
      result.push({
        ...currentItem,
        subLayer: matchedSub
      });
    }
    return result;
  }, []);
};

2. 替换组件中原有错误的filteredData计算逻辑，建议用useMemo做性能缓存

const filteredData = useMemo(() => {
  return filterNestedLayers(layers, searchValue);
}, [layers, searchValue]);

优化提示：如果需要搜索命中后自动展开对应折叠面板，可以在过滤返回节点时追加autoExpanded: true标记，面板渲染时读取该标记控制展开状态；搜索关键词清空时重置为默认折叠逻辑即可。

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