ReactJS实现多分类数组数据全字段搜索过滤的方法

问题核心 #

原有列表过滤逻辑仅针对companyName单个字段做匹配判断，无法覆盖接口返回的其余业务字段，因此无法实现全字段全局搜索效果，同时原有代码还存在语法闭合缺失、列表key使用下标、tr标签未嵌套td等问题。

实现逻辑 #

全局搜索的核心判断规则：只要单条数据的任意一个可搜索字段包含输入的关键词，就保留该条数据渲染。实现时只需把所有需要参与搜索的字段值拼接为一个统一字符串，再做一次包含判断即可，不需要逐个字段写多或条件判断。

优化后完整代码 #

搜索框状态代码 #

const [search, setSearch] = useState('');

<input 
  type="text" 
  placeholder="输入关键词全局搜索"
  value={search} 
  onChange={(e)=> setSearch(e.target.value)}
/>

列表渲染过滤代码 #

{APIData
  .filter(data => {
    const keyword = search.trim().toLowerCase()
    // 搜索词为空时直接返回全量数据
    if (!keyword) return true

    // 列出所有需要参与全局搜索的字段，不需要搜索的字段（比如image）可以不加入数组
    const searchFields = [
      data.companyName,
      data.email,
      data.companyNumber,
      data.lineofBusiness,
      data.address,
      data.pincode,
      data.area,
      data.city,
      data.state,
      data.country,
      data.uniqueNumber
    ]

    // 统一处理字段值：空值转空字符串、非字符串值转字符串、统一转小写，避免运行报错
    const combinedSearchText = searchFields
      .map(fieldValue => String(fieldValue ?? '').toLowerCase())
      .join(' ')

    // 只要拼接后的文本包含关键词，就命中过滤规则
    return combinedSearchText.includes(keyword)
  })
  .map((data) => {
    return(
      <tbody key={data.id || data.uniqueNumber}>
        <tr><td>{data.companyName}</td></tr>
        <tr><td>{data.companyNumber}</td></tr>
        <tr><td>{data.uniqueNumber}</td></tr>
        <tr><td>{data.lineofBusiness}</td></tr>
      </tbody>
    )
  })}

额外优化点说明 #

• 提前对搜索词做trim()处理，避免用户输入首尾空格导致匹配失败
• 搜索词转小写的逻辑放在filter循环外执行，减少重复计算提升性能
• 对字段值做空值兼容，当字段值为null/undefined/数字类型时，不会触发toLowerCase的类型报错
• 列表渲染的key替换为数据自带的唯一标识（id/uniqueNumber），替代原有的数组下标，避免列表增删排序时出现渲染错乱
• 补全了原有代码缺失的filter方法闭合括号，修正了<tr>标签未嵌套<td>的HTML语法问题
• 后续如果需要增减参与搜索的字段，只需要修改searchFields数组即可，维护成本远低于多条件或判断写法

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