React中如何根据选中部门筛选子部门数组

我有一个存储部门信息的JSON数组：

[
  {
    "department": "Sound Department",
    "subDepartments": [
      "Supervising Sound Editor",
      "Dialog Editor",
      "Sound Designer",
      "Foley Artis",
      "Sound Recordist"
    ]
  },
  {
    "department": "Camera Department",
    "subDepartments": [
      "Camera Operator",
      "Second Assistant Camera",
      "Other Assistant Camera",
      "Steadycam Operator",
      "Focus Puller"
    ]
  },
  {
    "department": "Production Department",
    "subDepartments": [
      "Camera Operator",
      "Second Assistant Camera",
      "Other Assistant Camera",
      "Steadycam Operator",
      "Focus Puller"
    ]
  }
]

我用这个数组做了一个部门下拉菜单，希望选中部门后自动生成对应的子部门下拉菜单。目前部门下拉能正常工作，选中的部门也存在状态里，但不知道怎么正确筛选子部门。我的React代码如下：

import React, { useState } from "react";
import "./CreateJobPage3.css"

import Button from "../Input/Button";
import Select from "../Input/Select";
import departmentData from "../Data/departmentSheet.json";

const CreateJobPage3 = (props) => {
    const [department, setDepartment] = useState()
    const [subDepartment, setSubDepartment] = useState()

    const departments = departmentData.map((data) => data.department)

    const subDepartments = departmentData.filter(item => {
        return item.department === department;
      });

    const departmentHandler = (props) =>{
        setDepartment(props)
    }

    const subDepartmentHandler = (props) =>{
        setSubDepartment(props)
    }

  return (
    <>
      <div className="CJP3___inner">
          <Select
            placeholder="Choose Department"
            options={departments}
            value={department}
            onChangeOption={departmentHandler}
          />
          <Select
            placeholder="Choose Department"
            options={subDepartments}
            value={subDepartment}
            onChangeOption={subDepartmentHandler}
            isMulti={true}
          />
      </div>
      <Button className="isGrey formButton" text="Add Function" />
    </>
  );
};

export default CreateJobPage3;

你的代码核心问题出在子部门的筛选逻辑上：

1. filter方法返回的是匹配的整个对象数组（比如[{department: "...", subDepartments: [...]}]），但你的Select组件需要的是子部门的字符串列表，不是对象；
2. 初始状态department为undefined，此时filter会返回空数组，需要处理未选中部门时的空值情况。

1. 修正子部门筛选逻辑 #

用find代替filter找到匹配的部门对象，再提取它的subDepartments数组；如果没有选中部门，返回空数组：

const subDepartments = department 
  ? departmentData.find(item => item.department === department).subDepartments 
  : [];

2. 优化状态初始值 #

给department和subDepartment设置明确初始值，避免undefined带来的问题（因为子部门开启了isMulti，所以初始值设为空数组）：

const [department, setDepartment] = useState("")
const [subDepartment, setSubDepartment] = useState([])

3. 修正子部门下拉的占位文本 #

把第二个Select的placeholder改成“Choose Sub Department”，避免和部门下拉混淆：

<Select
  placeholder="Choose Sub Department"
  options={subDepartments}
  value={subDepartment}
  onChangeOption={subDepartmentHandler}
  isMulti={true}
/>

4. 切换部门时清空子部门选中项 #

在切换部门的回调里清空子部门的选中状态，避免出现选中项和当前部门不匹配的情况：

const departmentHandler = (selected) =>{
    setDepartment(selected)
    setSubDepartment([])
}

完整修改后的代码 #

import React, { useState } from "react";
import "./CreateJobPage3.css"

import Button from "../Input/Button";
import Select from "../Input/Select";
import departmentData from "../Data/departmentSheet.json";

const CreateJobPage3 = (props) => {
    const [department, setDepartment] = useState("")
    const [subDepartment, setSubDepartment] = useState([])

    const departments = departmentData.map((data) => data.department)

    const subDepartments = department 
      ? departmentData.find(item => item.department === department).subDepartments 
      : [];

    const departmentHandler = (selected) =>{
        setDepartment(selected)
        setSubDepartment([])
    }

    const subDepartmentHandler = (selected) =>{
        setSubDepartment(selected)
    }

  return (
    <>
      <div className="CJP3___inner">
          <Select
            placeholder="Choose Department"
            options={departments}
            value={department}
            onChangeOption={departmentHandler}
          />
          <Select
            placeholder="Choose Sub Department"
            options={subDepartments}
            value={subDepartment}
            onChangeOption={subDepartmentHandler}
            isMulti={true}
          />
      </div>
      <Button className="isGrey formButton" text="Add Function" />
    </>
  );
};

export default CreateJobPage3;

内容的提问来源于stack exchange，提问作者Emil