React中的多个过滤器

本文介绍了React中的多个过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在构建一个项目，该项目显示api中的一些数据，现在我需要对其进行过滤.

I am building a project that displays some data from api and now I need to filter it.

我已经完成类别过滤器，现在我必须做一个价格范围过滤器，以便这两个过滤器可以一起工作，但是我在努力正确地做到这一点. 对于价格范围过滤器，我使用2个输入和一个提交按钮.

I've done the category filter and now I have to do a price range filter so both these filters could work together, but I'm struggling how to do this right. For price range filter I use 2 inputs and a submit button.

我有一个对象数组，看起来像这样；

I got an array of objects, looks like this;

filterData = [ { name: 'Aang', bender: 'yes', nation: 'Air', person: 'yes', show: 'ATLA', price: 132342 }, { name: 'Appa', bender: 'yes', nation: 'Air', person: 'no', show: 'ATLA', price: 1322 }, { name: 'Asami', bender: 'no', nation: 'Republic City', person: 'yes', show: 'LOK', price: 132342 }, { name: 'Azula', bender: 'yes', nation: 'Fire', person: 'yes', show: 'ATLA', price: 12342 }, etc]

我处于状态:

state = { data: [], nation: '', priceStart: '', priceEnd: '' }

一个函数，如果我的弯曲器状态已更改，则设置状态 起始状态和结束状态也有类似的功能 当我为价格设置状态时，我会解析它，所以我有一个状态，顺便说一句，每次输入一些数字然后删除它时，都会收到警告，提示说'value'属性收到了NaN

A function that sets state if my bender state has changed Also there are similar functions for start and end states When I set state for prices I parseInt it, so I have a number in state, btw I get a warning every time I enter some digit and then delete it, it says Received a NaN for the 'value' attribute

chFilter = (type, val) => { switch(type) { case 'nation': this.setState({ nation: val }); break; case 'priceStart': this.setState({ priceStart: val }); break; case 'priceEnd': this.setState({ priceEnd: val }); break; default: break; } }

getBenders = () => { const { data, category, priceStart, priceEnd } = this.state; if( nation || priceStart || priceEnd ){ return data.filter(this.filterBender); } else { return data; } } filterBender = data => { let { nation, priceStart, priceEnd } = this.state; if(data.nation !== nation) return false; if(data.price < priceStart) return false; return true; }

我认为我需要对所有状态执行一个通用功能，以便它可以监视状态变化并返回过滤后的数据. 帮助正确执行操作

As I think I need to do a common function for all the states so it could watch the changes of state and return filtered data. Help how to do this right

推荐答案

您应该编写一个新的过滤器函数，将这些过滤器合并在一起.并像这样使用它:

You should write a new filter function which merges these filters together. And use it like this:

filterBender = data => { const {bender, person, nation} = this.state; if(bender && data.bender !== bender) return false; if(person && data.person !== person) return false; if(nation && data.nation !== nation) return false; ... return true; } const visibelBenders = filterData.filter(filterBender);

这样，您将只过滤一次数据，并且每个弯曲器都会针对每个约束条件进行一次评估.最后，只有对所有不同if都返回true的弯曲器将被插入到visibelBenders数组中，您可以对其进行渲染. 另外，您可以将其包装到记忆函数中，以便仅在过滤器之一的情况下执行改变了.

This way, you will only filter your data once and every bender gets evaluated for each constraint once. At the end, only the bender which returns true for all the different ifs will be inserted into the visibelBenders array, which you could render. Additionally, you could wrap this into a memorization function to only execute it, if one of the filters changed.

要显示所有弯曲器，如果未设置过滤器，则可以将过滤器包装到新功能中，以检查是否启用了过滤器.

To display all benders, if no filter is set you could wrap the filter into a new function to check if filtering is enabled.

const getBenders = () => { const { bender, person, nation} = this.state; if( person || bender || nation ){ return this.filterData.filter(filterBender); } else { return this.filterData; } } const benders = getBenders();