React中具有多个条件的复杂结果过滤

Question

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

我正在根据多个条件过滤旅行团。每次游览都是一个对象

'search_text': $('#search input')

在过滤器块中，我正在收集数据，通过这些数据可以过滤我的游览。这里看起来如何：

'search_text': $('#search').Children("input[name=vehicle]")

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

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

顺便说一句，不是对每种持续时间情况（“少一”，“一五” ...）都使用关键字，对持续时间过滤器进行编码的更好方法是使用minDuration和maxDuration变量。这样，您不必显式检查每个案例，而只需检查一次：

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