ReactJS实现嵌套数据多字段联合搜索过滤的方法

• 过滤维度不全：仅判断了details下的一级键名是否匹配，完全没有覆盖content数组内元素name字段的匹配逻辑，不支持第二个搜索维度
• 过滤粒度太粗：外层filter只做整个条目的保留/丢弃判断，没有针对content子项的二次过滤能力，既无法实现「键名不匹配但content匹配时，仅保留对应子项」的需求，也没法在content匹配时过滤掉同条目下不相关的子项
• JSX渲染语法错误：内层遍历content的map函数用花括号包裹后没有写return语句，实际运行时不会渲染任何content项内容，且循环项未加React要求的唯一key标识
• 逻辑冗余不严谨：空搜索值的判断写在filter循环内部，每次遍历都会重复执行；空值判断时直接return条目对象而非布尔值，不符合filter方法的参数约定，虽然能运行但语义混乱

用reduce替代原来直接在渲染时filter+map的写法，先完成数据过滤重组再渲染，逻辑分层更清晰，判断规则按优先级设置：

1. 空搜索词时直接返回全量数据
2. 一级键名命中搜索词时，保留该条目下的全部内容
3. 一级键名未命中，但条目下存在name字段匹配搜索词的content子项时，仅保留匹配的content子项，丢弃其他子项
4. 以上条件都不满足时，直接丢弃整个条目

完整实现代码如下：

// 提前统一处理搜索关键词，避免循环内重复计算
const keyword = searchText.trim().toLowerCase();

// 第一步：按规则过滤重组数据
const filteredResults = Object.entries(data.details).reduce((acc, [entryKey, entryValue]) => {
  // 判断一级键名是否命中
  const isKeyMatched = entryKey.toLowerCase().includes(keyword);
  // 筛选当前条目下命中的content子项
  const matchedContent = entryValue.content.filter(item => 
    item.name.toLowerCase().includes(keyword)
  );

  // 空搜索词返回全量数据
  if (!keyword) {
    acc[entryKey] = entryValue;
    return acc;
  }

  // 一级键名命中：保留整个条目所有内容
  if (isKeyMatched) {
    acc[entryKey] = entryValue;
    return acc;
  }

  // 键名未命中但有content子项命中：仅保留命中的子项
  if (matchedContent.length > 0) {
    acc[entryKey] = {
      ...entryValue,
      content: matchedContent
    };
    return acc;
  }

  // 都不命中则丢弃该条目
  return acc;
}, {});

// 第二步：渲染过滤后的结果
{Object.entries(filteredResults).map(([entryKey, entryValue]) => (
  <div key={entryKey}>
    <p>{entryValue.name}</p>
    {entryValue.content.map((contentItem) => (
      <p key={contentItem.name}>{contentItem.name}</p>
    ))}
  </div>
))}

• 输入le时：Alex、Leon的一级键名包含关键词，两个条目全量返回，和预期输出一致
• 输入ball时：三个一级键名都不匹配，但Alex下的basketball、Harsha下的baseball命中content匹配规则，两个条目保留且仅返回匹配的content子项，和预期输出一致
• 搜索框为空时：全量返回所有条目内容，符合常规搜索交互逻辑

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