React Native如何实现对象数组的多字段关键词搜索

你原来的单字段搜索逻辑只校验了name字段的匹配结果，要实现多字段同时检索，核心是修改数组filter的判断规则：只要条目下任意一个指定字段包含搜索关键词，就保留该条目。

基础实现（指定搜索字段） #

如果只需要对固定几个字段做搜索，直接在判断条件里追加对应字段的匹配规则即可，代码可读性最高：

const searchFilter = (text) => {
  const keyword = text.toUpperCase().trim();
  if (keyword) {
    const newData = data.filter((item) => {
      // 逐个声明需要参与搜索的字段，做空值兜底避免报错
      const nameMatch = item.name ? item.name.toUpperCase() : '';
      const cityMatch = item.city ? item.city.toUpperCase() : '';
      // 任意字段命中关键词即返回匹配结果
      return nameMatch.indexOf(keyword) > -1 || cityMatch.indexOf(keyword) > -1;
    });
    setFilterData(newData);
    setSearch(text);
  } else {
    // 输入为空时回显全量数据
    setFilterData(data);
    setSearch(text);
  }
};

按你给的示例数据，输入Sa时：

• id为1的条目city字段是Sacramento，命中匹配
• id为2的条目name字段是Sam，命中匹配
  两条数据都会正常返回，符合需求。

通用实现（自动遍历所有字段） #

如果后续字段会频繁新增，不想每次都手动加判断，可以用对象遍历的方式自动校验所有字段，还支持自定义排除不需要参与搜索的字段：

const searchFilter = (text) => {
  const keyword = text.toUpperCase().trim();
  if (keyword) {
    const newData = data.filter((item) => {
      // 遍历条目所有键值对做匹配
      return Object.entries(item).some(([key, value]) => {
        // 这里可以加排除规则，比如跳过id字段不参与搜索
        if (key === 'id') return false;
        // 只处理字符串、数字类型的字段值，避免复杂类型值转字符串报错
        if (typeof value !== 'string' && typeof value !== 'number') return false;
        return String(value).toUpperCase().indexOf(keyword) > -1;
      });
    });
    setFilterData(newData);
    setSearch(text);
  } else {
    setFilterData(data);
    setSearch(text);
  }
};

注意点 #

• 所有匹配逻辑都统一做了大写转换，大小写不敏感，输入sa/SA/Sa都能正常命中
• 加了空值和类型判断，不会因为字段值为null/undefined或者复杂类型导致页面崩溃
• 如果需要模糊匹配的写法更简洁，可以把indexOf判断换成includes，效果一致，React Native默认支持的JS版本已完全兼容该API

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