对嵌套数据进行反应选择

如何解决对嵌套数据进行反应选择

我正在尝试创建一个嵌套的选择optgroup，并尝试了以下方法，

const data = [
  {
    sectorId: 5,sectorName: "Sector One",departments: [
      {
        deptName: "Production",jobtitles: [
          {
            JobTitleID: 167,DepartmentID: 51,JobName: "Production Manager",Deleted: false,SortOrder: 5
          },{
            JobTitleID: 178,JobName: "Production Supervisor",SortOrder: 3
          },{
            JobTitleID: 449,JobName: "Senior Wall Panel Designer",SortOrder: 15
          }
        ]
      },{
        deptName: "Design/Engineering",jobtitles: [
          {
            JobTitleID: 294,DepartmentID: 52,JobName: "Senior Truss Designer",SortOrder: 5
          }
        ]
      }
    ]
  },{
    sectorId: 24,sectorName: "Sector Two",departments: [
      {
        deptName: "Consulting",jobtitles: [
          {
            JobTitleID: 191,DepartmentID: 92,JobName: "Saw Shop Supervisor",SortOrder: 1
          },{
            JobTitleID: 474,JobName: "Senior Truss Designer - Part Time",SortOrder: 11
          }
        ]
      },{
        deptName: "Administration",jobtitles: [
          {
            JobTitleID: 461,DepartmentID: 114,JobName: "Sawyer",SortOrder: 7
          },{
            JobTitleID: 278,JobName: "Service Manager",SortOrder: 2
          }
        ]
      }
    ]
  }
];

const App = () => {
  return (
    <select>
      {data.map((levelOne,i) => (
        <optgroup label={levelOne.sectorName} key={i}>
          {levelOne.departments.map((levelTwo,j) => (
            <optgroup label={levelTwo.deptName} key={j}>
              {levelTwo.jobtitles.map((job,l) => (
                <>
                  <option key={job.JobTitleID} value={job.JobTitleID}>
                    {job.JobName}
                  </option>
                </>
              ))}
            </optgroup>
          ))}
        </optgroup>
      ))}
    </select>
  );
};

render(<App />,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"> </div>

抱歉，上面的代码段有错误，您还可以查看工作示例here

这不提供嵌套的数据组，并且仅以单级本身停止。

当前输出：

Sector One
Sector Two

预期输出：

   Sector One

     Production

       -> Production Manager

       -> Production Supervisor

       -> Senior Wall Panel Designer

     Design/Engineering
    
       -> Senior Truss Designer

   Sector Two

     Consulting

       -> Saw Shop Supervisor

       -> Senior Truss Designer - Part Time

     Administration
    
       -> Sawyer

       -> Service Manager

在这里只有职位是选项，因此根据上述数据，具有->的列表将单独成为选项，其他列表将作为标签。

因此，仅使用optgroup，我才尝试了上面的代码，但是不知道我在做什么错误，导致未按预期结果填充数据。

请帮助我解决上述问题，并使上述示例像预期的输出一样工作。

添加任何其他基于反应的库来实现此目的也很受欢迎。

解决方法

1. optgroup可能不嵌套，因此仅显示扇区名称；
2. 您可以尝试使用react-selector库。这是我发现的带有嵌套级别的示例react-select nested groups。