首页 > 解决方案 > 如何对 React Native 中数组中对象的不同键值应用过滤器

问题描述

我正在尝试将过滤器应用于具有对象的数组,并且我希望获得结果,就好像我在搜索栏中键入国家或名称或值并获得与特定查询相关的结果一样。请帮助我如何实现。目前,我能够获得一个值中的任何一个而不是全部,但我希望任何查询都可以给出结果。这是我的数组:

 data: [
    { id: "1", value: "Zaid Qureshi", country: "Pakistan", price: "23" },
    { id: "2", value: "Wasiq Safdar", country: "UK", price: "23" },
    { id: "3", value: "Bilal Hasan", country: "US", price: "23" },
    { id: "4", value: "Waqas Hasan", country: "Austria", price: "23" },
    { id: "5", value: "Malik Mati", country: "Saudia", price: "23" },
    { id: "6", value: "Zeeshan", country: "Japan", price: "23" },
    { id: "7", value: "ABC", country: "China", price: "23" },
    { id: "8", value: "DEF", country: "Isreal", price: "23" },
    { id: "9", value: "GHI", country: "Canada", price: "23" },
    { id: "10", value: "JKL", country: "Inda", price: "23" },
  ],

目前我正在这样做

 const searchData = this.state.data.filter((item) =>
      item.value.toLowerCase().includes(search.toLowerCase())
    );

标签: javascriptarraysreactjsreact-nativefilter

解决方案


您只需使用 OR 运算符。

运算符的快速亮点:&& 逻辑 (AND) - || 逻辑(或)。


const searchData = this.state.data.filter((item) =>
  item.value.toLowerCase().includes(search.toLowerCase()) 
||
  item.country.toLowerCase().includes(search.toLowerCase()) 
|| 
  item.price.toLowerCase().includes(search.toLowerCase())
);

祝你项目好运


推荐阅读