Question

我得到一个后端数据结构如下。

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

在用户界面中，我有三个下拉列表。

Department ID       |      Stream        | Course ID

第一部门ID下拉列表应使用departmentID 105654和105655填充。当选择部门ID 105654时，应将流下拉列表填充为科学和艺术。当从第二个下拉列表中选择科学时，课程ID应填入第三个下拉列表中104,105,106。

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

如何使用react js实现此目的？我是新手。

Answer 1

假设您在data中收到数据并且您的下拉组件都接受了必须插入各自下拉菜单中的数组，您将得到如下数组：

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

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

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

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

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

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

Answer 2

我想使用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}

首先，部门的下拉列表将仅显示。在Department下拉列表中选择一个值时，我会将dropdown2状态设置为 true ，它会使Stream的下拉列表可见，依此类推......

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

2 个答案: