Javascript 如何基于下拉值过滤/渲染项目？

我有一个对象数组，我想从中过滤出一些项目，并根据具有值（也由状态管理）的下拉列表在视图中渲染它

该数组如下所示：

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'
      }
    ],
  },
  ....
];

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

到目前为止，在我看来，我能够呈现所有数据：

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

然而，这会产生我不想要的结果。当我选择类似德克萨斯州奥斯汀市的

时，在该筛选中，我将得到如下结果：

或


我不知道为什么我的结果好坏参半。我假设问题在于我过滤的方式：

jobs.filter((job: DepartmentJob) =>
                job.jobs.some((job: Job) => job.location === selectedLocation)
              ).map((filteredJob: DepartmentJob => filteredJob)

我的问题是：如何返回所有与我所选值完全匹配的位置
 问题在于
某些
，如果所有元素中的一个满足条件，它将返回
true
。因此，集合中的内容与下拉列表值匹配并不重要，它将返回
true

编辑示例

jobs.reduce( (acc, current) => acc.concat(current.filter( job => job.location === selectedLocation)))

job.job
来自哪里？您也在同一范围内声明了两次
job
（
job:DepartmentJob
，
job:job
），您可以尝试避免这种情况。@Colin
job.job
是正在映射的
props
的一部分，而
jobs
是job内部的一个数组。所以它是
this.props.jobs.map（job=>job.jobs）
很抱歉命名。我应该换一下。@Dyo很抱歉给你起了个名字。这是我应该改变的两种不同类型。我不应该在凌晨3点就把这件事说出来：（我已经更新了类型以尝试创建此clearer@Dyo我已经更新了命名。所以我应该更具体一些？我是否应该不使用
。一些
？您可以只使用
过滤器
，它将返回一个包含满足条件的元素的数组。您可以尝试组合和
过滤器
。或者迭代嵌套数组并对每个数组进行筛选。@Spacebear5000我编辑了答案，并添加了一个示例。这有点有效。我必须将其更改为：
jobs.reduce（（acc:any，curr:any）=>acc.concat（curr.jobs.filter（（job:any）=>job.location==selectedLocation）），[]）
，但它只返回一个位置如下的数组：
[{applyUrl“…”，部门：“零售德克萨斯”，描述：“…”，id:“263501”，地点：“德克萨斯州奥斯汀”，…]
而不是像这样的对象
[{departmentName:“品牌营销”，jobs:[{……匹配地点}]}]