React Native中JS Filter匹配值存在却返回空数组问题求助

核心错误点 #

1. 解构错误：filter回调中使用({ item })解构，但数组中的每个元素本身就是目标对象，不存在item属性，导致后续访问item?.description全为undefined。
2. 无返回值的回调：filter要求回调返回布尔值判断是否保留元素，但当前回调仅写逻辑表达式却未return，默认返回undefined（被视为false），所有元素都被过滤。
3. 多余的JSON.stringify：目标字段（description[0]/title[0]/link[0]）本身就是字符串，转成JSON字符串会额外添加引号，干扰匹配逻辑。

修复后的代码 #

重点修改search方法中的过滤逻辑：

const search = () => {
  console.log("inside handleSearchButtonPressed")
  if (!itemListStore) {
    return
  }
  // 提前转小写，避免循环内重复操作
  const lowerCaseQuery = searchQuery.toLowerCase()

  const filteredObjs = itemListStore.filter((item) => {
    // 直接访问对象字段，去掉多余的JSON.stringify
    const descMatch = item?.description[0]?.toLowerCase().includes(lowerCaseQuery)
    const titleMatch = item?.title[0]?.toLowerCase().includes(lowerCaseQuery)
    const linkMatch = item?.link[0]?.toLowerCase().includes(lowerCaseQuery)
    // 必须返回布尔值
    return descMatch || titleMatch || linkMatch
  })

  console.log("filteredObjs", JSON.stringify(filteredObjs))

  if (!searchQuery || searchQuery === "") {
    console.log("1")
    // 建议：清空搜索时恢复原始数据，避免原数据被覆盖后无法恢复
    // setItemListStore(originalItemList)
  } else if (!filteredObjs.length) {
    console.log("2")
    setNoData(true)
  } else {
    console.log("3")
    setNoData(false)
    setItemListStore(filteredObjs)
  }
}

额外优化建议 #

• 保留原始数据：不要直接用过滤后的数据覆盖itemListStore，建议维护一个原始数据状态（比如originalItemList），每次搜索都基于原始数据过滤，避免清空搜索框时无法恢复完整列表。
• 空值安全处理：继续保留可选链?.，防止字段缺失导致报错。
• 性能优化：将searchQuery转小写的操作放在filter外部，避免每次循环重复执行转换。

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