我有一个对象数组,我想从中筛选出一些项目并根据具有值(也由状态管理)的下拉列表将其呈现在 View 中。
数组看起来像这样:
const arr = [
{
departmentName: 'Operations',
jobs: [
{
url: 'https:...',
description: '....',
department: 'Operations'
location: 'New York, NY'
}
],
},
{
departmentName: 'Brand Marketing',
jobs: [
{
url: 'https:...',
description: '....',
department: 'Brand Marketing'
location: 'New York, NY'
}
],
},
{
departmentName: 'Brand Marketing',
jobs: [
{
url: 'https:...',
description: '....',
department: 'Brand Marketing'
location: 'Austin, TX'
}
],
},
....
];
到目前为止,在我看来,我能够呈现所有数据:
type DepartmentJob = {
departmentName: string;
jobs: Job[];
};
export type Job = {
applyUrl: string;
department: string;
description: string;
id: string;
location: string;
order: any;
title: string;
};
class View extends React.Component<Props, State> {
public constructor(props: Props) {
super(props);
this.state = {
selectedLocation: 'All Locations'
}
}
public render() {
const { locations, careers } = this.props;
const { selectedLocation } = this.state;
return (
<Container>
<Select
label={selectedLocation}
options={locations}
onChange={(e: React.FormEvent<HTMLSelectElement>) => this.handleChange(e.currentTarget.value)}
value={selectedLocation}
/>
{careers.map((career: DepartmentJob) =>
<DepartmentContainer key={career.departmentName}>
<DepartmentName>{career.departmentName}</DepartmentName>
<JobsContainer>
{career.jobs.map(({ title, id, location }: Job) =>
<Card
key={id}
id={id}
title={title}
location={location}
/>,
)}
</JobsContainer>
</DepartmentContainer>,
)}
</Container>
)
}
private handleChange = (selectedLocation: string) =>
this.setState({ selectedLocation });
}
所以现在我想根据同样由状态处理的Select
或Dropdown 来过滤这些。我目前的处理方式是这样的:
public render() {
const { locations, careers } = this.props;
const { selectedLocation } = this.state;
if (this.state.selectedLocation !== 'All Locations') {
return (
<Container>
<Select
label={selectedLocation}
options={locations}
onChange={(e: React.FormEvent<HTMLSelectElement>) => this.handleChange(e.currentTarget.value)}
value={selectedLocation}
/>
{careers.filter((career: DepartmentJob) =>
career.jobs.some((job: Job) => job.location === selectedLocation)
).map((filteredJob: DepartmentJob) =>
<DepartmentContainer key={filteredJob.departmentName}>
<DepartmentName>{filteredJob.departmentName}</DepartmentName>
<JobsContainer>
{filteredJob.jobs.map(({ title, id, location }: Job) =>
<Card
key={id}
id={id}
title={title}
location={location}
/>,
)}
</JobsContainer>
</DepartmentContainer>,
)}
</Container>
)
}
然而,这会产生我不想要的结果。当我在此过滤中选择类似 Austin, TX
的内容时,我会得到如下结果:
或
我不确定为什么会得到混合结果。我假设问题出在我过滤的方式上:
jobs.filter((job: DepartmentJob) =>
job.jobs.some((job: Job) => job.location === selectedLocation)
).map((filteredJob: DepartmentJob => filteredJob)
我的问题是:如何返回与我所拥有的值完全匹配的所有位置作为所选值?
最佳答案
问题出在 some
上,如果所有元素之一满足条件,它将返回 true
。因此,无论集合中的内容是否与下拉列表值匹配,它都将返回 true
。
编辑示例
jobs.reduce( (acc, current) => acc.concat(current.filter( job => job.location === selectedLocation)))
关于javascript - 如何根据下拉值过滤/呈现项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51969265/