как поместить JSON вложенный массив в зависимый список выбора в React - PullRequest
Новая
       8

как поместить JSON вложенный массив в зависимый список выбора в React

0 голосов
/ 14 июля 2020

Извините за мой Engli sh, я тоже новичок в React. Я использую response-select. Я хочу, чтобы в первом поле выбора отображались названия колледжей, а во втором поле выбора отображались отделы внутри выбранного колледжа. на предыдущем выборе

это JSON файл 

[
    {
        "id": 1,
        "college_ar": "الحاسب الآلي ونظم المعلومات",
        "departments": [
            {
                "id": 1,
                "department_ar": "علوم الحاسب الآلي",
                "college_id": 1,
            },
            {
                "id": 2,
                "department_ar": "هندسة الحاسب الآلي",
                "college_id": 1,
            }
        ]
    },
    {
        "id": 2,
        "college_ar": "إدارة الأعمال",
        "departments": [
            {
                "id": 5,
                "department_ar": "إدارة الأعمال",
                "college_id": 2,
            },
            {
                "id": 6,
                "department_ar": "التسويق",
                "college_id": 2,

            }
         ]
    }
]

мой код, который вроде работает, хотя, когда я выбираю колледж, он отображает все отделы в одной опции \ ячейке, я понимаю, почему он делает это, поскольку я передаю весь массив как один вход для метки, но я не могу понять, как это сделать иначе: (

const college_name = this.state.colleges.map((college) => {
      return {
        value: college.id,
        label: college.college_ar,
      };
    });

    const departments_name = this.state.colleges.map((college) => {
      return {
        value: college.departments.map((department)=> {return department.id;}),
        label: college.departments.map((department)=> {return department.department_ar;}),
        link:  college.id,
      };
    });

код выбора: 

<Select
     label="Single select"
     value={this.state.selectedOption.value}
     onChange={this.handleChange1}
     options={college_name}
     styles={styles}/>

<Select
     name="Single select"
     value={this.state.selectedOption2.value}
     onChange={this.handleChange2}
     options={filteredOptions}
     styles={styles}/>
...