Question

我有一个基于输入过滤大量对象的函数：

filterLocations(filters) {
  let filteredLocations = _.filter(
    this.state.locations,
    location =>
      location.beds >= filters.min &&
      location.beds <= filters.max &&
      location.baths >= filters.bathrooms &&
      _.indexOf(filters.buildingTypes, location.buildingType.name) !== -1
  );
  this.setState({ filteredLocations: filteredLocations });
}

在另一个组件中，这是设置过滤器的地方：

let filters = {
  min: this.state.min || 0,
  max: this.state.max || 99,
  bathrooms: this.state.bathrooms || 0,
  buildingTypes: this.state.selectedTypes || []
};

前三个工作正常，因为＆＃39;默认值＆＃39;无论如何设置，所以它使过滤变得容易。但我在弄清楚最后一部分时遇到了麻烦。如果我选择buildingType它很好并且过滤按预期工作，但显然如果我将其留空，_.index(...)部分会尝试对任何内容进行排序，因此生成的数组为空。我想知道什么是重写_.indexOf(...)部分的最佳方法，所以我不必做类似的事情：

buildingTypes: this.state.selectedTypes || ['list all options here']

Answer 1

您是否可以使用三元有条件地包含indexOf，并且默认为true而没有任何buildingTypes，因此如果其他所有其他都是真的，表达式将评估为true？

filterLocations(filters) {
  const filteredLocations = _.filter(
    this.state.locations,
    location =>
      location.beds >= filters.min &&
      location.beds <= filters.max &&
      location.baths >= filters.bathrooms &&
      (filters.buildingTypes.length > 0 
         ? _.indexOf(filters.buildingTypes, location.buildingType.name) !== -1
         : true)
  );
  this.setState({ filteredLocations });
}

在React中使用lodash的多个过滤器

1 个答案: