React Native列表元素搜索实现及功能失效问题求助

问题原因 #

你的代码里存在以下几处逻辑错误导致搜索功能失效：

• 拼写错误：字符串匹配方法includes被误写为inludes，直接导致匹配逻辑报错
• filter方法使用不符合规范：Array.filter不会修改原数组，你当前代码过滤后没有返回过滤结果，整段过滤操作没有实际作用
• 函数传参逻辑混乱：filterItem定义时接收的参数是搜索文本，但你在渲染列表时错误传入了users数组，同时搜索框的输入事件仅修改了搜索词状态，没有触发过滤逻辑
• 状态初始值异常：searchquery初始值为undefined，调用toLowerCase方法时会抛出运行时错误
• 未兼容空搜索场景：没有处理搜索词为空时返回全部列表的逻辑

修复方案 #

1. 修正状态初始化

将searchquery的初始值改为空字符串，避免undefined导致的运行时错误：

const [searchquery, setSearchquery] = React.useState('');

2. 重写过滤函数

修正拼写错误，补全返回逻辑，兼容空搜索场景：

const filterItem = () => {
  // 搜索词为空直接返回全部用户数据
  if (!searchquery.trim()) return users;
  return users.filter((item) => {
    return item.name.toLowerCase().includes(searchquery.toLowerCase())
  })
}

3. 修正列表渲染逻辑

直接调用过滤函数获取结果遍历，同时将列表项的key改为唯一的用户id，提升渲染性能：

<ScrollView>
  {
    filterItem().map((item, index) => {
      return (
        <View key={item.id} style={styles.names}>
          <Text style={{ color: 'black', fontSize: 20, fontWeight: 'bold' }}>Name : {item.name}</Text>
          <Text style={{ color: 'black' }}>Mobile no : {item.number}</Text>
        </View>
      )
    })
  }
</ScrollView>

修改完成后搜索功能即可正常运行。

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