javascript - React 中具有多个标准的复杂结果过滤

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"
    },

在过滤器 block 中，我正在收集根据哪些标准过滤我的游览的数据。这是它的样子:

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

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

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

旁注，不是为每个持续时间情况使用关键字(“less-one”、“one-five”...)，更好的编码持续时间过滤器的方法是使用 minDuration 和maxDuration 变量。这样您就不必明确检查每个案例，而只需检查一次:

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