React Native搜索栏异常：输入无结果、搜索后列表清空，清空输入后内容不恢复

定位到的具体问题 #

• 大小写匹配逻辑错误：仅将输入的搜索词转小写，未将姓名的first/last字段同步转小写，若原数据姓名字段为大写开头（如"Jane"），与小写搜索词"jane"比对时永远匹配失败，直接导致过滤结果为空。
• 空值未做防护：contains函数直接解构name下的first/last，若某条数据的name字段为空、或对应子字段为undefined，调用.includes()时会直接抛出TypeError，导致整个过滤流程中断，列表被异常清空。
• 原始数据集被污染：如果fullData和渲染用的列表是同一个state，第一次执行setData(filteredData)后，后续所有搜索都是基于已经被过滤的数据集二次筛选，最终清空输入时也无法恢复初始全量列表。
• 空搜索词无兜底：删除所有输入内容时，虽然空字符串的.includes()方法理论上会返回true，但遇到上述空值、大小写异常时会直接中断流程，导致列表无法恢复。

修复后的代码实现 #

// 用useRef存储原始全量数据，避免被过滤结果覆盖
const fullDataRef = useRef(初始的全量用户列表);

// 重写匹配判断逻辑
const contains = (user, query) => {
  // 空搜索词直接返回匹配，减少不必要的判断
  if (!query) return true;
  // 空值兜底，避免解构、方法调用报错
  const nameInfo = user?.name || {};
  const firstName = (nameInfo.first || '').toLowerCase();
  const lastName = (nameInfo.last || '').toLowerCase();
  return firstName.includes(query) || lastName.includes(query);
};

// 重写搜索处理逻辑
const handleSearch = text => {
  const formattedQuery = text.toLowerCase().trim();
  // 始终基于ref存储的原始全量数据做过滤
  const filteredData = filter(fullDataRef.current, user => {
    return contains(user, formattedQuery);
  });
  setData(filteredData);
  setQuery(text);
};

// 补充原组件缺失的闭合标签
return (
  <View
    style={{
      backgroundColor: '#fff',
      padding: 10,
      marginVertical: 10,
      borderRadius: 20
    }}
  >
    <TextInput
      autoCapitalize="none"
      autoCorrect={false}
      clearButtonMode="always"
      value={query}
      onChangeText={queryText => handleSearch(queryText)}
      placeholder="Search"
      style={{ backgroundColor: '#fff', paddingHorizontal: 20 }}
    />
  </View>
);

修复点验证 #

• 所有参与匹配的字符串统一转小写，实现大小写不敏感的搜索效果，不会因为大小写差异导致无匹配结果。
• 全链路空值兜底，避免因字段缺失抛出类型错误导致流程中断。
• 基于独立存储的原始数据集做过滤，不会因为多次搜索导致数据集被污染，清空输入时可以正常返回全量列表。
• 空搜索词直接匹配，减少不必要的性能消耗。

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