React Native如何按两个条件实现数组过滤？

你当前修改的代码存在语法逻辑错误：把第二个过滤条件错误地作为includes方法的参数，还嵌套了多余的箭头函数，导致过滤逻辑失效。

正确实现思路 #

在d.data.filter()的回调函数中，用逻辑运算符组合两个过滤条件：

• 若希望name或element任意一个包含搜索文本就保留条目，用||（逻辑或）
• 若希望name和element同时包含搜索文本才保留，用&&（逻辑与）

修正后的代码 #

逻辑或（满足任一条件即保留）

const filtered = yourOriginalArray
  .map(d => ({ 
    ...d, 
    data: d.data.filter(c => 
      c.name.toUpperCase().includes(searchText.toUpperCase()) || 
      c.element.toUpperCase().includes(searchText.toUpperCase())
    )
  }))
  .filter(d => d.data.length);
setFilteredData(filtered);

逻辑与（需同时满足两个条件才保留）

const filtered = yourOriginalArray
  .map(d => ({ 
    ...d, 
    data: d.data.filter(c => 
      c.name.toUpperCase().includes(searchText.toUpperCase()) && 
      c.element.toUpperCase().includes(searchText.toUpperCase())
    )
  }))
  .filter(d => d.data.length);
setFilteredData(filtered);

补充说明 #

1. 统一将searchText和字段值转成大写，避免大小写敏感导致的过滤遗漏
2. 外层的.filter(d => d.data.length)用于过滤掉子项data为空的父级对象，避免展示空数据项

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