如何在React中实现表格多字段通用搜索功能？

需求说明 #

现有带搜索栏的表格，原仅基于subModule字段实现搜索过滤，需改造为通用搜索：只要搜索内容匹配表格数据的任意字段（如taskName、id、module等），就展示对应结果。

示例数据 #

[{"isConsole": true,"taskStatus": "SUCCESS","taskName": "G-csv_download-25","id": 463,"module": "Management","subModule": "Grid","taskId": "1fc0d5a7-834a-4906-8448-16835e8838b0","projectId": 42,"createdAt": "2023-01-21T05:56:50.184965Z","size": 0.20800000000000002,"failureMessage": null}, {"isConsole": true,"taskStatus": "SUCCESS","taskName": "G-csv_download-26","id": 464,"module": "Management","subModule": "Grid","taskId": "2724fcbf-d25b-424f","projectId": 42,"createdAt": "2023-01-21T06:02:48.557536Z","size": 0.20800000000000002,"failureMessage": null}, {"isConsole": true,"taskStatus": "SUCCESS","taskName": "G-csv_download-27","id": 465,"module": "Management","subModule": "Grid","taskId": "26642fb3-1593-4e0d-b276-901bb7e729c3","projectId": 42,"createdAt": "2023-01-21T10:31:30.965508Z","size": 0.20800000000000002,"failureMessage": null}]

原单字段搜索代码 #

const searchBasedFilter = React.useMemo(() => downloads.filter((data) => searchData ? data.subModule?.toLowerCase().includes(searchData?.toLowerCase()) : data), [searchData, downloads]);

改造后的通用搜索代码 #

const searchBasedFilter = React.useMemo(() => {
  if (!searchData) return downloads;
  
  const lowercasedSearch = searchData.toLowerCase();
  return downloads.filter(data => 
    Object.values(data).some(value => 
      String(value).toLowerCase().includes(lowercasedSearch)
    )
  );
}, [searchData, downloads]);

改造思路说明 #

1. 遍历所有字段值：用Object.values(data)提取当前数据项的所有字段值，无需手动指定要搜索的字段
2. 匹配逻辑优化：通过some()方法判断是否存在任意一个字段值匹配搜索关键词，只要有一个匹配就保留该数据项
3. 不区分大小写：统一将搜索关键词和字段值转为小写，实现大小写不敏感的搜索
4. 空值兜底：用String(value)将所有值转为字符串，避免null、undefined或数字类型值直接调用toLowerCase()报错

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