Фильтрация плоских списков с несколькими элементами

Question

Я учусь React Nativeсоздав приложение RideSharing. У меня есть функция, которая позволяет пользователю фильтровать FlatList компонент с несколькими поездками, и каждый из них имеет разные элементы, связанные, например, date, number of passengers, costи т.д... И filteredDate, filteredPassangers, filteredCost - это переменные состояния, которые позволяют пользователю выбирать, как он хочет фильтровать.

Я написал функцию, которая фильтрует данные вот так:

function filter() {
        const newData1 = lists.filter(
            item => {
                return item.de === filteredFrom 
                || item.para === filteredTo 
                || item.date === filteredDate        
                || item.passangers=== filteredPassangers 
                || item.date === filteredDate 
                || item.cost3 === filteredCost  
            })  
         props.setLists(newData1),  

    //... 
}

Когда я фильтрую более 1 элемента, он возвращает любой компонент Ride, для которого есть хотя бы одно из этих значений, как истинное. Однако я хочу, чтобы он возвращал только те поездки, для которых значения, которые я фильтрую, верны.

Например, если я фильтрую date и cost элементы, я хочу, чтобы компонент "Поездка" возвращал только поездки, на которых data и cost верны.

Как я могу закодировать это, чтобы отфильтровать истинные элементы?

РЕДАКТИРОВАТЬ

Это текущий код:

let screen;
    if (selectedValue==='de') { () =>
        setFlags(flags => [...flags, filteredFrom]);
        screen=
//...
    } else if (selectedValue==='para') { () => 
        setFlags([...flags, filteredTo]);
        screen=
//...
    } else if (selectedValue==='date') { () => 
        setFlags(flags => [...flags, filteredDate]);
        screen=
//...
    } else if (selectedValue==='passangers') { () => 
        setFlags(flags => [...flags, filteredPassangers]);
        screen=
        //...
    } else if (selectedValue==='cost3') { () =>
        setFlags(flags => [...flags, filteredCost]);
        screen=
        //...
    }


    //Filtering
    function filterRides() {
        
        const newData1 = lists.filter(
            item => {
                return (flags.includes("filteredFrom")? item.de === filteredFrom :true)
                && (flags.includes("filteredTo")? item.para === filteredTo :true)
                && (flags.includes("filteredDate")? item.date === filteredDate :true)
                && (flags.includes("filteredPassangers")? item.passangers === filteredPassangers :true)
                && (flags.includes("filteredCost")? item.cost3 === filteredCost :true)
            }) 

            
        console.log(flags);
        props.setLists(newData1);
        //...
    } 

Answer 1

Ты используешь || вместо && он же or вместо and. попробуй это:

function filter() {
    const newData1 = lists.filter(
        item => {
            return item.de === filteredFrom 
            && item.para === filteredTo 
            && item.date === filteredDate        
            && item.passangers=== filteredPassangers 
            && item.date === filteredDate 
            && item.cost3 === filteredCost  
        })  
     props.setLists(newData1),  

//... 
}

РЕДАКТИРОВАТЬ:

Если вы хотите использовать только некоторые фильтры, вы можете добавить список активных флагов в состояние, а затем проверить каждый элемент на соответствие состоянию

const [flags, setFlags] = useState([]) //edit2: set this whenever the user selects a filter
function filter() {
const newData1 = lists.filter(
    item => {
        return (flags.includes("filteredFrom")? item.de === filteredFrom :true)
        && (flags.includes("filteredTo")? item.para === filteredTo :true) ...
    })  
 props.setLists(newData1),  

//... 
}