0

我正在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 个项目时，它会返回至少具有这些值之一为 true 的任何 Ride 组件。但是，我只希望它返回我过滤的值是真实的游乐设施。

例如，如果我过滤dateandcost项目，我希望 Ride 组件仅返回dataandcost为 true 的游乐设施。

我如何编码以过滤真实的项目？

编辑

这是当前代码：

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);
        //...
    }
4

1 回答 1

0

您正在使用||而不是&&akaor而不是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),  

//... 
}
于 2020-09-23T11:14:46.647 回答