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

Question

<分区>

Answer 1

您正在从 API 获取数据并将其提供给您的组件。现在，这个过滤器组件有一个数据的本地副本，将用于过滤。我无法评论您将如何在组件中创建过滤器(从 UI 的 Angular 来看)。我可以建议使用 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
});