如何解决筛选带有多个项目的清单
我正在通过构建RideSharing应用程序来学习React Native
。我有一个功能,允许用户过滤多个骑行的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),//...
}
当我过滤多个项目时,它将返回具有至少一个这些值为true的任何Ride组件。但是,我只希望它返回我过滤的值为真的乘车。
例如,如果我过滤date
和cost
项目,我希望乘车组件仅返回data
和cost
为真的游乐设施。 / p>
我该如何编码才能过滤出真实的项目?
编辑
这是当前代码:
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);
//...
}
解决方法
您正在使用||
而不是&&
或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),//...
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。