在 React 中使用多个标准过滤复杂结果答案

【问题标题】：Complex Results Filtration with Multiple Criteria in React在 React 中使用多个标准过滤复杂结果
【发布时间】：2020-01-19 07:51:23
【问题描述】：

请检查我的沙箱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"
    },

在过滤器块中，我正在收集数据，根据哪些标准过滤我的旅行。这里的样子：

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

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

【问题讨论】：

标签： javascript reactjs algorithm filtering

【解决方案1】：

您需要确保满足所有应用的条件在您将游览项目推送到数组中。您可以通过多种方式做到这一点 - 例如，您可以使用 every() function。

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);
})

附带说明，不要对每个持续时间案例使用关键字（“少一”、“一五”...），对持续时间过滤器进行编码的更好方法是使用 minDuration 和最大持续时间变量。这样您就不必明确检查每个案例，而只需执行一次：

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

【讨论】：