反应中多准则的复杂结果过滤

Question

请检查我的沙箱https://codesandbox.io/s/nice-mclaren-dhw88，我无法粘贴我的所有代码在这里。

我在用多种标准进行旅游过滤。每一次旅行都是一个目标。

{
      id: 4,
      difficulty: "hard",
      is_exclusive: 0,
      duration: 13,
      days: 14,
      image: "5d72500fab232.jpg",
      price: 1300,
      title: "charyn canyon  ",
      slug: "charynskiy-kan-on",
      destinations: [
        {
          id: 2,
          title: "Desert tours"
        }
      ],
      season: "winter"
    },

在filter块中，我正在收集数据，根据这些数据标准过滤我的旅游。以下是它的外观：

​

​

{
 destinations: ["Desert tours"," Nursultan"]
 season: ["summer","winter"]
 difficulty:["hard","normal"]
 price: 3000
 is_exclusive: false
 duration: "one-five"
}

之后，我将循环所有的旅游，并将其与我的filter对象进行比较。如果任何值匹配，则将其推送到呈现的数组中。问题是，它推动所有的旅游价值匹配。例如，如果我选择“沙漠旅游”，把季节设为“冬天”，它就把所有的旅游都推到“沙漠旅游”，所有的旅游都是“冬天”，所以结果可以是“沙漠旅游”和“夏季”旅游。我需要准确地过滤它的标准，用户选择。

Answer 1

在之前，您需要确保所有应用的条件都满足，然后在数组中推送浏览项。您可以通过几种方式这样做--例如，您可以使用每个()函数。

tours.forEach(tour => {
    const allCriteriaSatisfied = Object.keys(filterOptions).every(optionName => {
        const optionValue = filterOptions[optionName]

        // if an option is not set, return true
        if (!optionValue) return true;

        // insert code here for each specific criterion
        // and return true if a criterion is satisfied

        // end with return false statement
        return false;
    })
    if (allCriteriaSatisfied) toursArray.push(tour);
})

另外，与其对每个持续时间情况(“较少的”、“1-5”)使用关键字，不如使用minDuration和maxDuration变量对工期筛选器进行编码。这样，您就不必显式地检查每一种情况，而是只检查一次：

  let isDurationFilterSatisfied = true
  if (minDuration && tour.days < minDuration) { 
     isDurationFilterSatisfied = false
  }
  if (maxDuration && tour.days > maxDuration) {
     isDurationFilterSatisfied = false
  }
  return isDurationFilterSatisfied