应用过滤器时的正确搜索语句

Question

我已经为我的React-native应用程序创建了一个搜索功能，然而我不太清楚如何创建正确的搜索语句。我现在的情况是这样的。你可以打开一个过滤器屏幕，在这里你可以输入一些搜索条件（对于车辆），所以品牌，型号，颜色，车牌。

保存过滤器后，你会被重新定向到一个结果页面。在这个页面上，我用Redux数据（车辆数据库）填充一个const，然后在flatlist中显示之前过滤这些数据。

const vehicles = useSelector(state => state.uploadedVehicles.vehicles)
const filters = props.navigation.getParam('savedFilters')

const filteredVehicles = vehicles.filter(vehicle => 
        vehicle.make === filters.makeFilter ||
        vehicle.model === filters.modelFilter ||
        vehicle.color === filters.licenseplateFilter ||
        vehicle
.licenseplate === filters.licenseplateFilter
        )



...return Flatlist with filteredVehicles here...

如果我为某一特定品牌设置了一个过滤器，那么只能找到该品牌的车辆。如果我为某一车型设置了过滤器，则只能找到该车型的车辆。然而，如果我为两个语句设置了过滤器，现在会显示有一个匹配搜索条件的车辆。如果我要搜索一辆蓝色的道奇，我会找到与道奇品牌相匹配的车辆，但也会找到所有上传的蓝色车辆。

我如何扩大我的搜索功能，使它将显示匹配1个过滤器的车辆，但如果2个或更多的过滤器被添加，它将结合这些过滤器到一个更具体的搜索功能？

Answer 1

我喜欢用另一种方法来解决这个问题，同样使用Redux。在这里，我向你展示一个示例代码。

 case SAVE_FILTERS: {
      const appliedFilters = state.filters; // Here you have your filters that have to be 
      initialized in your state. They also have to be turned to true or false but you can 
      do it in another function (See next one)

      // Here we check every condition
      const updatedData = state.data.filter(data => { 
        if (appliedFilters.filter1 && !data.filter1) {
          return false;
        }
        if (appliedFilters.filter2 && !data.filter2) {
          return false;
        }
        if (appliedFilters.filter3 && !data.filter3) {
          return false;
        } else {
          return true;
        }
      });
// and now you will return an updated array of data only for the applied filters
      return {
        ...state,
        displayData: updatedLocations,
      };

诀窍是检查动作中的每一个条件。在这个特定的情况下，我们是通过过滤器来检查是否为真，但你可以扩展到其他条件。

上面代码的流程是。

如果我们应用了一个过滤器，并且数据有这个过滤器，那么我们就通过条件。我们对所有条件都这样做。如果我们把所有的条件都传递了，就返回true，这意味着它将被添加到显示数据中，用户将看到它。

希望对大家有所帮助。

Answer 2

也许这不是让过滤器工作的最漂亮的方法。但我没有完全让我的过滤器工作与MIPB他的反应位它确实把我推到了正确的方向。

我在appliedFilters中传递过滤器。然后我不断地检查每个过滤器与车辆的部分，是过滤的。

从车辆的制造开始。如果make filter没有设置(所以是"")，我只返回包含每辆车的Vehicles数组，否则我返回与appliedFilters.makeFilters匹配的每辆车。

这个新的makeFilterArray是和modelFilter一起检查的。如果没有设置，就把它设置为makeFilter数组，继续检查其他过滤器，如果设置了，就检查匹配模型的makeFilterArray。

也许这不是最优雅的解决方案，但以我有限的知识，我还是把它解决了。:-)

case FILTER_VEHICLES: 
const appliedFilters = action.setFilters; 
console.log(appliedFilters)
console.log(appliedFilters.makeFilter)
console.log(appliedFilters.modelFilter)
console.log(appliedFilters.licenseplateFilter)
console.log(appliedFilters.colorFilter)
const makeFilterArray = appliedFilters.makeFilter === "" ? vehicles : state.vehicles.filter(vehicle => vehicle.make === appliedFilters.makeFilter)
const modelFilterArray = appliedFilters.modelFilter === "" ? makeFilterArray : makeFilterArray.filter(vehicle => vehicle.model === appliedFilters.modelFilter)
const licenseplateFilterArray = appliedFilters.licenseplateFilter === "" ? modelFilterArray : modelFilterArray.filter(vehicle => vehicle.licenplate === appliedFilters.licenseplate)
const filteredArray = appliedFilters.colorFilter === "" ? licenseplateFilterArray : licenseplateFilterArray.filter(vehicle => vehicle.color === appliedFilters.color)

// and now you will return an updated array of data only for the applied filters
return {
  ...state,
  filteredVehicles: filteredArray
};