Как получить данные из базы данных для зависимого выпадающего списка в reactjs

Question

Здесь я создал список, в котором я создал его с помощью массива. Но я хочу получить все это из базы данных. так как я могу это сделать.

 this.state = {
      Cities: [],
      Colleges: [],
      Faculties: [],
      selectedCity: "--Choose City--",
      selectedCollege: "--Choose College--",
    };
    this.changeCity = this.changeCity.bind(this);
    this.changeCollege = this.changeCollege.bind(this);
  }

  componentDidMount() {
    this.setState({
      Cities: [
        {
          name: "A",
          Colleges: [
            { name: "X", Faculties: ["fy", "sy", "ty"] },
            { name: "Y", Faculties: ["fy", "sy", "ty"] },
          ],
        },
        {
          name: "B",
          Colleges: [
            { name: "N", Faculties: ["fy", "sy", "ty"] },
            { name: "M", Faculties: ["fy", "sy", "ty"] },
          ],
        },
        { name: "C", Colleges: [{ name: "O", Faculties: ["fy", "sy", "ty"] }] },
        { name: "D", Colleges: [{ name: "P", Faculties: ["fy", "sy", "ty"] }] },
        { name: "E", Colleges: [{ name: "Q", Faculties: ["fy", "sy", "ty"] }] },
      ],
    });
  }

Answer 1

Вам нужно делать цепочки, чтобы: 1. соответствовать производительности, 2. распределять города и иметь более легкий код. этот пример кода был сделан только для вас. (Не тестируется, поэтому вам нужно двигаться вперед отсюда)

внутри опции select> value вам нужно l oop поверх него либо с помощью map / forEach / для l oop, чтобы отобразить города как а также колледжи.

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {

  const [cities, setCities] = useState([])
  const [colleges, setCollege] = useState([])

  const fetchCities = () => {
    const options = {}
    const url = "http://mysite.gov/cities/"
    fetch(url, options)
    .then(res => res.json())
    .then(data => {
      setCities(data.cities)
    }).catch((e) => {
      console.log(e)
    })
  }

  const fetchColleges = (event) => {
    const options = {}
    const url = `http://mysite.gov/cities/?collegeByCity=${event.target.value}`
    fetch(url, options)
    .then(res => res.json())
    .then(data => {
      setCollege(data.colleges)
    }).catch((e) => {
      console.log(e)
    })
  }

  const showMe = (event) => {
    console.log(event.target.value)
  }

  useEffect(() => {
    fetchCities()
  })

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {cities.length === 0
        ? ""
        : <select onChange={(event) => fetchColleges(event)}>
          {cities.map((item, index) => {
            return <option value={item}>{item}</option>
          })}
        </select>
      }

      {colleges.length === 0
        ? ""
        : <select onChange={(event) => showMe(event)}>
          {colleges.map((item, index) => {
            return <option value={item}>{item}</option>
          })}
        </select>
      }
    </div>
  );
}