使用嵌套数据进行选择

Question

我正在尝试创建一个嵌套的select 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,
            DepartmentID: 51,
            JobName: "Production Supervisor",
            Deleted: false,
            SortOrder: 3
          },
          {
            JobTitleID: 449,
            DepartmentID: 51,
            JobName: "Senior Wall Panel Designer",
            Deleted: false,
            SortOrder: 15
          }
        ]
      },
      {
        deptName: "Design/Engineering",
        jobtitles: [
          {
            JobTitleID: 294,
            DepartmentID: 52,
            JobName: "Senior Truss Designer",
            Deleted: false,
            SortOrder: 5
          }
        ]
      }
    ]
  },
  {
    sectorId: 24,
    sectorName: "Sector Two",
    departments: [
      {
        deptName: "Consulting",
        jobtitles: [
          {
            JobTitleID: 191,
            DepartmentID: 92,
            JobName: "Saw Shop Supervisor",
            Deleted: false,
            SortOrder: 1
          },
          {
            JobTitleID: 474,
            DepartmentID: 92,
            JobName: "Senior Truss Designer - Part Time",
            Deleted: false,
            SortOrder: 11
          }
        ]
      },
      {
        deptName: "Administration",
        jobtitles: [
          {
            JobTitleID: 461,
            DepartmentID: 114,
            JobName: "Sawyer",
            Deleted: false,
            SortOrder: 7
          },
          {
            JobTitleID: 278,
            DepartmentID: 114,
            JobName: "Service Manager",
            Deleted: false,
            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>

​

对不起，上面的片段有错误，您也可以查看工作示例这里。

这不提供嵌套的数据组，它只限于单一级别本身。

电流输出：

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，我尝试了上面的代码，但不知道我做了什么错误，结果没有按照预期的结果填充数据。

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

添加任何其他基于react的库来实现这一点也是受欢迎的。

Answer 1

1. optgroup可能不是嵌套的，因此只显示sectorName；
2. 您可以尝试使用react选择器库。下面是我在嵌套级别中找到的一个react选择嵌套组示例。