React中的多個過濾器

Question

我正在建立一個顯示api數據的項目，現在我需要對其進行過濾。

我已經完成了類別過濾器，現在我必須做一個價格范圍過濾器，以便這兩個過濾器可以一起工作，但是我在努力正確地做到這一點。 對於價格范圍過濾器，我使用2個輸入和一個Submit按鈕。

我得到了一系列對象，看起來像這樣；

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

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

我認為我需要對所有狀態執行一個通用功能，以便它可以監視狀態變化並返回過濾后的數據。 幫助正確地做到這一點

Answer 1

您應該編寫一個新的過濾器功能，將這些過濾器合並在一起。 並像這樣使用它：

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();

Answer 2

我對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}
                />

            ))}