React 中的多个过滤器

IT技术 javascript json reactjs object filter
2021-05-18 04:37:07

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

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

我得到了一组对象，看起来像这样；

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: ''
    }

如果我的弯曲器状态发生变化，则设置状态的函数还有用于开始和结束状态的类似函数当我为价格设置状态时，我解析它，所以我有一个状态，顺便说一句，每次我输入一些数字时我都会收到警告然后删除它，它说 Received a NaN for the 'value' 属性 

 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;
    }

因为我认为我需要为所有状态执行一个通用函数，以便它可以观察状态的变化并返回过滤后的数据。帮助如何正确地做到这一点

2个回答

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

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 数组中，您可以渲染该数组。此外，您可以将其包装到记忆函数中，以便仅在过滤器之一发生更改时才执行它。

要显示所有弯曲器，如果未设置过滤器，您可以将过滤器包装到一个新函数中以检查是否启用了过滤。

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

我对 marge 过滤器有同样的问题 我有两个过滤器，每个过滤器都可以正常工作，但不能一起工作，只有第一次工作我的代码是 

const [search, setSearch] = useState('');
const [select, setSelect] = useState('All');


const updateSearch = (e) => {
    setSearch(e.target.value);
    //console.log(search);
  }

const updateSelect = (e) => {
    setSelect(e.target.value);
    //console.log(select);
}

const searchCountry = zemlje.filter((zemlja) => {
    if (zemlja.name.toLowerCase().search(new RegExp(`^${search}`)) === 0) return true;
});

const selectCountry = zemlje.filter((zemlja) => {
    if (select ==='All') return true;
    if (zemlja.region === select) return true;
});

我想根据搜索输入过滤这个并选择下拉菜单

        <div className="atlas">
            {searchCountry.map(zemlja => (

                <JednaZemlja 
                key={zemlja.alpha3Code}
                name={zemlja.name}
                flag={zemlja.flag}
                population={zemlja.population}
                region={zemlja.region}
                capital={zemlja.capital}
                />

            ))}
其它你可能感兴趣的问题
上一篇React Router 4——监听路由操作并以编程方式继续/停止路由 下一篇你如何发布和订阅不是 Mongo db 的数据？