如何在ReactJS中实现嵌套对象层级的label字段搜索

我需要在ReactJS中实现一个搜索函数，能在深层嵌套的对象结构中返回匹配结果，且始终返回包含匹配项的父级包装对象。

数据结构示例 #

[
  {
    label: "Navigation",
    accordion: true,
    key: "navigation",
    actions: [
      {
        action: "navigateTo",
        label: "Navigate To"
      },
      {
        action: "Back",
        label: "Back"
      },
      {
        action: "closeDialog",
        label: "Close Dialog"
      },
      {
        action: "delay",
        label: "Delay"
      }
    ]
  }
]

搜索预期结果 #

• 当搜索关键词为 "Delay" 时，返回结果：

[
  {
    label: "Navigation",
    accordion: true,
    key: "navigation",
    actions: [
      {
        action: "delay",
        label: "Delay"
      }
    ]
  }
]

• 当搜索关键词为 "navigation" 时，返回完整的父对象：

[
  {
    label: "Navigation",
    accordion: true,
    key: "navigation",
    actions: [
      {
        action: "navigateTo",
        label: "Navigate To"
      },
      {
        action: "Back",
        label: "Back"
      },
      {
        action: "closeDialog",
        label: "Close Dialog"
      },
      {
        action: "delay",
        label: "Delay"
      }
    ]
  }
]

实现方案 #

可以编写一个递归处理的搜索函数，遍历对象层级，匹配label字段，同时保留父级结构：

const searchNestedData = (data, searchTerm) => {
  // 统一转小写，实现不区分大小写搜索
  const lowerSearchTerm = searchTerm.toLowerCase();

  return data.reduce((acc, item) => {
    // 复制当前项，避免修改原数据
    const clonedItem = {...item};
    let isMatch = false;

    // 检查当前项的label是否匹配
    if (clonedItem.label?.toLowerCase().includes(lowerSearchTerm)) {
      isMatch = true;
    } else if (clonedItem.actions && Array.isArray(clonedItem.actions)) {
      // 过滤actions中匹配的项
      clonedItem.actions = clonedItem.actions.filter(action => 
        action.label?.toLowerCase().includes(lowerSearchTerm)
      );
      // 如果actions有匹配结果，标记为匹配
      isMatch = clonedItem.actions.length > 0;
    }

    // 只有匹配的项才加入结果数组
    if (isMatch) {
      acc.push(clonedItem);
    }

    return acc;
  }, []);
};

React组件使用示例 #

import { useState } from 'react';

const App = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const originalData = [
    {
      label: "Navigation",
      accordion: true,
      key: "navigation",
      actions: [
        { action: "navigateTo", label: "Navigate To" },
        { action: "Back", label: "Back" },
        { action: "closeDialog", label: "Close Dialog" },
        { action: "delay", label: "Delay" }
      ]
    }
  ];

  const filteredData = searchNestedData(originalData, searchTerm);

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="搜索..."
      />
      <pre>{JSON.stringify(filteredData, null, 2)}</pre>
    </div>
  );
};

export default App;

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