React Native 如何过滤具有 3 个以上参数的 Flatlist？

Question

各位程序员你好，我是 React Native 的新手，真的是菜鸟，所以在我们继续之前，我会快速总结一下示例和代码。

我正在从 api 获取产品列表并将其存储在两个数组中： products[]和catalogue[]

Catalog 数组用于存储从 api 接收到的所有项目。 products 数组将被 Flatlist 用来显示数据。 应用过滤器时，产品中的项目应该被过滤，以便 Flatlist 也更新屏幕上新过滤的数据。

现在这里是我从 api 获取的所有对象数据中的一个简化的一个对象。

Object {
  "designNumber": "CHE-S-207 RW",
  "id": 292187,
  "imageUrl": "http://company.shop.org/images/shop/136/4.jpg",
  "itemCategory": "BRACELET",
  "itemStatus": "INSTOCK",
  "itemType": "CHE",
  "quantity": "1",
  "rfidTag": "Item4",
  "shopId": 136,
  "skuNumber": "Item4",
}

我将用于过滤对象数据的主要值是itemStatus 、 itemCategory和itemType 。

我在我的状态对象中使用这些变量来存储其中的值，我将使用多选选择器从过滤器屏幕 UI 中选择这些值。

state = {
  products: [],
  catalogue: [],
  itemStatus: "", //Binary values. Only one string value for this one
  itemCategory: [], //Multiple values in array
  itemType: [], //Multiple values in array
};

现在我们来谈谈主要交易。 假设我已经使用过滤器屏幕 UI 为这些过滤器参数选择了某些值。 例如， itemStatus: "AVAILABLE" ， itemCategory: ["MENS", "WOMENS", "CORPORATE"]和itemType: ["COMMON","UNCOMMON", "SALE", "EXCLUSIVE"]

因此，通俗地说，使用 UI，我为状态选择了可用，类别为 3 个值，类型为 4 个值。 现在最后有一个应用过滤器按钮。 这是我调用filterProducts()类的函数的filterProducts() ，它将采用这些多个参数并相应地过滤我的 Flatlist 项目。

请记住， catalogue[]数组包含从 api 获取的全部数据，而products[]数组是显示在 Flatlist 中的内容。 所以理想情况下，无论来自过滤器函数的任何新过滤数据都应该更新products[]数组，这样我认为也会在 Flatlist 上更新。

我的问题？ 我在 stack 和 medium 上阅读的每篇文章总是只查看 Searchbar Search 过滤器示例。 这基本上只接受 1 个过滤器字符串，然后过滤列表。

但是如果我有多个参数要过滤，就像我试图实现的例子一样？ 如果您有 3 个参数，并且每个参数在过滤时可以有多个值（4 个或更多），该怎么办？ 如何应用如此复杂的过滤级别，然后将过滤后的项目返回到我的 Flatlist？

<Button title="Apply Filter" onPress={() => this.filterProducts}/>

filterProducts = () => {
  //Logic to take all the filter parameters and their selected values

  this.state.products = if({/** No filters are applied */}){
    return this.state.catalogue //Return original data
  } else {
    this.state.catalogue.filter({/** Apply complex filter logic here}).map(){
      //return filtered items list
    }
  }
}

也许逻辑流程是这样的？ 除了我不知道如何一次过滤具有这么多过滤参数的列表。 任何帮助将不胜感激。 谢谢。

更新 1：根据 u/TommyLeong 的建议，我更新了我的代码。 这是我的过滤器功能和逻辑的样子：

state = {
  isFilterActive: false,
  products: [],
  catalogue: [],
  itemStatus: "",
  itemCategory: [],
  itemType: [],
}

//Get data from the api
fetchProducts = aysnc () => {
  //Make the api call and get the response
  const data = await response.json();

  this.setState({
    products: data.data, //Originally show all the data from the api
    catalogue: data.data, //Store all the data from the api
  });
};

//Filter Function
filterProducts = () => {
  console.log("function called", this.state.isFilterActive);
  //Pack all filter data in one query object
  let query = {
    itemStatus: this.state.itemStatus,
    itemCategory: this.state.itemCategory,
    itemType: this.state.itemType,
  };
  console.log("Filter object", Object.entries(query));

  if (this.state.isFilterActive) {
    const filteredData = this.state.catalogue.filter(function (item) {
      return Object.entries(query).every(([key, value]) =>
        value.includes(item[key])
      );
    });
    console.log("Result: Filtered Array", filteredData);
    this.setState({ products: filteredData });
  } else {
    //Return original data is isFilterActive == false
    this.setState({ products: this.state.catalogue });
  }
};

render(){
  return(
    //Contains my views. My Filter screen has a bunch of pickers 
    //and a apply filter button

    <DropDownPicker 
      label="Item Status"
      multipleSelection={true} //More than one values can be selected
      items={/*define my filter values for itemStatus here*/}
      onChangeItem={(item) => {
        this.setState({ itemStatus: item.value});
      }
    />
    <DropDownPicker 
      label="Item Category"
      items={/*define my filter values for itemCategory here*/}
      onChangeItem={(item) => {
        //item here is an array of selected values
        this.setState({ itemCategory: item});
      }
    />
    <DropDownPicker 
      label="Item Type"
      multipleSelection={true} //More than one values can be selected
      items={/*define my filter values for itemType here*/}
      onChangeItem={(item) => {
        //item here is an array of selected values
        this.setState({ itemType: item });
      }
    />
    <Button 
      title="Apply Filter"
      onPress={() => {
        this.setState({ isFilterActive: true }, () =>
          this.filterProducts()
        );
      }}
  )
}

现在我的代码和逻辑已经相当清楚了，让我们继续解决新问题。 filter 函数中的过滤逻辑 100% 有效！ 但只有当所有 3 个过滤器属性都选择了某个值时

//my filter object in the function
let query = {
  itemStatus: this.state.itemStatus,
  itemCategory: this.state.itemCategory,
  itemType: this.state.itemType,
};

情况 1：当所有 3 个过滤器类别都选择了某些值时的 console.log：

Filter object Array [
  Array [
    "itemStatus",
    "INSTOCK",
  ],
  Array [
    "itemCategory",
    Array [
      "MENS",
      "WOMENS",
    ],
  ],
  Array [
    "itemType",
    Array [
      "COMMON",
      "SALE"
    ],
  ],
]

Result: Filtered Array Array[
  Object: {
    //first item matching all 3 filter criteria
  },
  Object: {
    //2nd item matching all 3 filter criteria
  },
  Object: {
    //3rd item matching all 3 filter criteria
  },
]

情况 2：当没有为 3 个过滤条件中的任何一个选择任何值时的 console.log。 对于这种情况，我选择 itemType，即 itemType[] 为空。

Filter object Array [
  Array [
    "itemStatus",
    "INSTOCK",
  ],
  Array [
    "itemCategory",
    Array [
      "MENS",
      "WOMENS",
    ],
  ],
  Array [
    "itemType",
    Array [], //Array is blank here because no filter 
              //values were picked for itemType
  ],
]

Result: Filtered Array Array [] //No items returned to me, Flatlist becomes empty

我当然知道问题出在这个过滤器逻辑中，但我无法解决问题，为什么当 3 个标准之一存在未定义的值时过滤器不起作用..最重要的是，再次确定如何修复它 ：（

//Current filter Logic
if (this.state.isFilterActive) {
    const filteredData = this.state.catalogue.filter(function (item) {
      return Object.entries(query).every(([key, value]) =>
        value.includes(item[key])
      );
    });
    console.log("Result: Filtered Array", filteredData);
    this.setState({ products: filteredData });
  } else {
    //Return original data is isFilterActive == false
    this.setState({ products: this.state.catalogue });
  }

Answer 1

这就是我将如何解决..

1. 创建一个变量调用hasFilterApply来存储关于用户是否应用任何过滤器的布尔值。 从 UI 中删除所有过滤器时，您需要将 boolean 设置回 FALSE。
2. 每次过滤之前，我都会根据hasFilterArray决定对哪个数组（目录/产品）进行过滤。 如果为 true，则意味着我应该继续使用this.state.products因为它包含最新的过滤产品列表。
3. 渲染时，再次检查hasFilterApply是否为 TRUE。 如果是，则渲染this.state.products否则只渲染this.state.catalgoues

this.state = {
    hasFilterApply: false,      // update hasFilterApply to TRUE when one or more filter is applied, set to FALSE when no filter is applied
    catalogues: [],             // keep original response
    products: []                // this will be the final render product list
}

/*
* Assuming this is how your catalgoues will be
const catalogues = [{"designNumber":"CHE-S-207 A","id":1,"imageUrl":"http://company.shop.org/images/shop/136/4.jpg","itemCategory":"BRACELET","itemStatus":"AVAILABLE","itemType":"EXCLUSIVE","quantity":"1","rfidTag":"Item1","shopId":1,"skuNumber":"Item1",},{"designNumber":"CHE-S-207 B","id":2,"imageUrl":"http://company.shop.org/images/shop/136/4.jpg","itemCategory":"MENS","itemStatus":"NO","itemType":"SALE","quantity":"1","rfidTag":"Item2","shopId":2,"skuNumber":"Item2",},{"designNumber":"CHE-S-207 C","id":3,"imageUrl":"http://company.shop.org/images/shop/136/4.jpg","itemCategory":"WOMENS","itemStatus":"AVAILABLE","itemType":"UNCOMMON","quantity":"1","rfidTag":"Item3","shopId":3,"skuNumber":"Item3",},{"designNumber":"CHE-S-207 D","id":4,"imageUrl":"http://company.shop.org/images/shop/136/4.jpg","itemCategory":"CORPORATE","itemStatus":"AVAILABLE","itemType":"COMMON","quantity":"1","rfidTag":"Item4","shopId":4,"skuNumber":"Item4",},{"designNumber":"CHE-S-207 E","id":5,"imageUrl":"http://company.shop.org/images/shop/136/4.jpg","itemCategory":"MENS","itemStatus":"AVAILABLE","itemType":"COMMON","quantity":"1","rfidTag":"Item5","shopId":5,"skuNumber":"Item5",},]
*/

getFromAPI = async () => {
    const catalogues = await getCatalogues();
    this.setState({ catalogues })
}

filterStatus = (filterValue) => {
    const latestList = hasFilterApply ? this.state.products : this.state.catalogues;
    const newList = []

    latestList.filter((product)=>{
      if(product.itemStatus === filterValue){
        newList.push(product)
      }
    }

    this.setState({ products: newList })
}

filterCategory = (filterValue) => {
    const latestList = hasFilterApply ? this.state.products : this.state.catalogues;
    const newList = []

    latestList.filter((product)=>{
      if(product.itemCategory === filterValue){
        newList.push(product)
      }
    }

    this.setState({ products: newList })
}

filterType = (filterValue) => {
    const latestList = hasFilterApply ? this.state.products : this.state.catalogues;
    const newList = []

    latestList.filter((product)=>{
      if(product.itemType === filterValue){
        newList.push(product)
      }
    }

    this.setState({ products: newList })
}

renderMyProducts = () => {
    // At the end before you decide render the products, you should know which ARRAY (catalgoues/products) should be passed to your component.
    // Do checking on whehter "hasFilterApply" is TRUE or false. If false, then pass catalgoues, otherwise pass products to your  component.
}

render(){
    return(
        // render your components
    )
}