如何在React中构建高级过滤器组件？

Question

尽管进行了许多研究，但我似乎并未完全找到想要的东西。我正在构建一个房地产React应用，在搜索页面中，我希望能够根据价格范围，卧室数量，浴室数量，房屋类型来过滤结果。我看了一些教程，但是我不确定它们是否指向正确的方向。我想使用功能组件，反应挂钩，没有redux或MobX，也没有CSS框架。是否需要使用</form>标签？我们如何在数组上动态应用多个过滤器？因为该过滤器将对从数组中存储的api下载的本地数据起作用。请给我尽可能多的解释。这是一个例子：

Answer 1

您正在从API获取数据并将其提供给组件。现在，此过滤器组件具有数据的本地副本，该副本将用于过滤。我无法评论如何在组件中创建过滤器（从UI角度来看）。我可以建议使用lodash库一次将各种过滤器应用于对象数组。我能想到的例子之一-

var location = 'Miami, FL'
var priceFrom = $2000;
var priceTo = $3000;

var filterFunctions = _.overEvery([locationFilter, priceFilter]);

locationFilter(data) {
  return data.filter(o => o.location === location);
}

priceFilter(data) {
  return data.filter(o => o.price >= priceFrom && o.price <= priceTo);
}

var result = yourData.filter(filterFunctions);

要检查用户选择了哪些过滤器的状态，需要将其维护在组件的本地状态。我猜，将其声明为对象数组的最佳方法。当用户更改/选择时，按下过滤器及其值。如果用户取消选择，则将其从阵列中删除。例如，如果用户从“位置”下拉列表中选择某项，则将值推入数组（如果尚未存在）。否则根据名称更新值。数组应如下所示（假设有react组件）：

this.state.filters = [{name: 'price', value: 2000},
   {name: 'location', value: 'Miami, FL'}];

现在使用此数组来决定要应用哪些过滤器功能：

locationFilter(location) {
  return this.state.yourData.filter(o => o.location === location);
}


var result;
filters.map(f => {
  switch(f.name) {
    case 'location':
      result = locationFilter(f.value);
      break;
    case 'price':
      result = priceFilter(f.value);
      break;
  }
  // result contains filtered result
});