Javascript React JS-解析复杂的Json结构并填充到下拉列表中

我得到一个后端数据结构，如下所示

{
    "courseDetails" : 
        [{"departmentId" : 105654,
        "courses" : 
            [{"stream" : "science","courseIds" : ["104","105","106"]}, 
             {"stream" : "art","courseIds" : ["102", "103"]}]
         }, 
          {"departmentId" : 105655,
          "courses" : 
            [{"stream" : "commerce","courseIds" : ["101", "100"]}]
          }
         ]
}

在UI中，我有三个下拉列表

Department ID       |      Stream        | Course ID

第一个部门ID下拉列表应填充部门ID 105654和105655。选择部门id 105654时，流下拉列表应填充为science and art。当从第二个下拉列表中选择science时，课程ID应在第三个下拉列表中填充为104、105、106

上面的json数据结构是一次拥有所有数据，这样我就不必在每次选择下拉选项时进行后端调用

---

如何使用react js实现这一点？我是新手

假设您在

data

中接收数据，并且您的下拉组件每个都接受一个数组，该数组必须插入到各自的下拉菜单中，那么您将得到如下数组：

const Department = data.courseDetails.map(obj => obj.departmentId);

现在，假设您选择了某个部门ID，您可以执行以下操作：

const streams = data.courseDetails.filter(x => x.departmentId === departmentId)[0].courses.map(obj => obj.stream)

const courseIds = data.courseDetails.filter(x => x.departmentId === departmentId)[0].courses.filter(x => x.stream === streamId)[0].courseIds;

现在假设流存储在streamId中，则可以执行以下操作：

const streams = data.courseDetails.filter(x => x.departmentId === departmentId)[0].courses.map(obj => obj.stream)

const courseIds = data.courseDetails.filter(x => x.departmentId === departmentId)[0].courses.filter(x => x.stream === streamId)[0].courseIds;

---

您应该将每个数组存储在一个状态中，并将该状态作为道具传递给相应的下拉组件。

假设您在

data

中接收数据，并且您的下拉组件每个都接受一个必须插入其各自下拉菜单中的数组，则会得到如下数组：

const Department = data.courseDetails.map(obj => obj.departmentId);

现在，假设您选择了某个部门ID，您可以执行以下操作：

const streams = data.courseDetails.filter(x => x.departmentId === departmentId)[0].courses.map(obj => obj.stream)

const courseIds = data.courseDetails.filter(x => x.departmentId === departmentId)[0].courses.filter(x => x.stream === streamId)[0].courseIds;

现在假设流存储在streamId中，则可以执行以下操作：

const streams = data.courseDetails.filter(x => x.departmentId === departmentId)[0].courses.map(obj => obj.stream)

const courseIds = data.courseDetails.filter(x => x.departmentId === departmentId)[0].courses.filter(x => x.stream === streamId)[0].courseIds;

---

您应该将每个数组存储在一个状态中，并将该状态作为道具传递给相应的下拉组件。

我想使用3 react select for 3下拉列表，并根据彼此选择的值将它们连接起来。状态看起来像您提供的数据，三个下拉字段有三个标志

dropdown1: true, dropdown2: false, dropdown3: false

渲染将如下所示：

{this.state.dropdown1 ? <Select options=[all the Department ID] onChange={handleSelectDepartment} />: null}
{this.state.dropdown2 ? <Select options=[course corresponding stream ] onChange={handleSelectStream} />: null}
{this.state.dropdown3 ? <Select optons=[Stream corresponding courseID ] onChange={handleSelectCourse} />: null}

{this.state.dropdown1？：null}
{this.state.dropdown2？：null}
{this.state.dropdown3？：null}

因此，首先，部门的下拉列表将仅可见。

---

在部门下拉列表中选择一个值时，我会将dropdown2状态设置为true，并使流的下拉列表可见，依此类推。

我想使用3 react select for 3下拉列表，并根据彼此选择的值将它们连接起来。状态看起来像您提供的数据，三个下拉字段有三个标志

dropdown1: true, dropdown2: false, dropdown3: false

渲染将如下所示：

{this.state.dropdown1 ? <Select options=[all the Department ID] onChange={handleSelectDepartment} />: null}
{this.state.dropdown2 ? <Select options=[course corresponding stream ] onChange={handleSelectStream} />: null}
{this.state.dropdown3 ? <Select optons=[Stream corresponding courseID ] onChange={handleSelectCourse} />: null}

{this.state.dropdown1？：null}
{this.state.dropdown2？：null}
{this.state.dropdown3？：null}

因此，首先，部门的下拉列表将仅可见。 在部门下拉列表中选择一个值时，我会将下拉2状态设置为true，并使流的下拉列表可见，以此类推