Javascript 如何使用reactjs和NodeJS从mysql中提取数据到下拉列表（表单）？

我是新开发人员ReactJS，我开发了一个表单，前端是ReactJS，后端是NodeJS，数据库是MySQL。我想在下拉菜单中显示数据，其中有两个下拉菜单，根据第一个下拉菜单的选择，第二个下拉菜单应该显示MySQL中的数据

模型（user.js）模式文件

---

你的问题是什么？我想在下拉列表中显示数据，根据第一个下拉列表的选择，有两个下拉列表。第二个下拉列表应该显示来自MySQL的数据。你的问题是什么？我想在下拉列表中显示数据，在这两个下拉列表中，根据第一个下拉列表的选择，第二个下拉列表应该显示显示来自mysql的数据

  register.js

   import React, { Component } from 'react' 
   import { register } from './UserFunctions'

    class Register extends Component { constructor() { super() this.state = { business_name: '', 
   first_name: '', last_name: '', email: '', phone_number: '', cell_number: '', fax_number: '', 
   address1:'', 
    address2:'', city:'', state:'', country:'', password: '', errors: {} }

    this.onChange = this.onChange.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value })
   }


onSubmit(e) {
    e.preventDefault()

    const newUser = {
        business_name: this.state.business_name,
        first_name: this.state.first_name,
        last_name: this.state.last_name,
        email: this.state.email,
        phone_number: this.state.phone_number,
        cell_number: this.state.cell_number,
        fax_number: this.state.fax_number,
        address1: this.state.address1,
        address2: this.state.address2,
        city: this.state.city,
        state: this.state.state,
        zipcode: this.state.zipcode,
        country: this.state.country,
        password: this.state.password
    }

    register(newUser).then(res => {
        this.props.history.push(`/login`)
    })
  }

  render() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6 mt-5 mx-auto">
                    <form onSubmit={this.onSubmit}>
                        <h1 className="h3 mb-3 font-weight-normal">Register</h1>

                        <div className="form-group">
                            <label htmlFor="name">Business name</label>
                            <input
                                type="text"
                                className="form-control"
                                name="business_name"
                                placeholder="Enter your business name"
                                value={this.state.business_name}
                                onChange={this.onChange}
                            />
                        </div>


                        <div class="form-group">
                        <label for="exampleFormControlSelect1">theraputic area</label>
                        <select class="form-control" id="exampleFormControlSelect1">i need to diplay 
     data here
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                        </div>

                        <div class="form-group">
                            <label for="exampleFormControlSelect2">disease</label>
                            <select class="form-control" id="exampleFormControlSelect2">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>


                        <div className="form-group">
                            <label htmlFor="name">First name</label>
                            <input
                                type="text"
                                className="form-control"
                                name="first_name"
                                placeholder="Enter your first name"
                                value={this.state.first_name}
                                onChange={this.onChange}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="name">Last name</label>
                            <input
                                type="text"
                                className="form-control"
                                name="last_name"
                                placeholder="Enter your last name"
                                value={this.state.last_name}
                                onChange={this.onChange}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="email">Email address</label>
                            <input
                                type="email"
                                className="form-control"
                                name="email"
                                placeholder="Enter email"
                                value={this.state.email}
                                onChange={this.onChange}
                            />
                        </div>

                        <div className="form-group">
                            <label htmlFor="phone">Phone number</label>
                            <input
                                type="number"
                                className="form-control"
                                name="phone_number"
                                placeholder="Enter phone number"
                                value={this.state.phone_number}
                                onChange={this.onChange}
                            />
                        </div>

                        <div className="form-group">
                            <label htmlFor="phone">Cell number</label>
                            <input
                                type="number"
                                className="form-control"
                                name="cell_number"
                                placeholder="Enter cell number"
                                value={this.state.cell_number}
                                onChange={this.onChange}
                            />
                        </div>

                        <div className="form-group">
                            <label htmlFor="phone">Fax number</label>
                            <input
                                type="number"
                                className="form-control"
                                name="fax_number"
                                placeholder="Enter phone number"
                                value={this.state.fax_number}
                                onChange={this.onChange}
                            />
                        </div>

                        <div className="form-group">
                            <label htmlFor="add1">Address1</label>
                            <input
                                type="text"
                                className="form-control"
                                name="address1"
                                placeholder=""
                                value={this.state.address1}
                                onChange={this.onChange}
                            />
                        </div>



                        <div className="form-group">
                            <label htmlFor="add2">Address2</label>
                            <input
                                type="text"
                                className="form-control"
                                name="address2"
                                placeholder=""
                                value={this.state.address2}
                                onChange={this.onChange}
                            />
                        </div>



                        <div className="form-group">
                            <label htmlFor="cit">City</label>
                            <input
                                type="text"
                                className="form-control"
                                name="city"
                                placeholder=""
                                value={this.state.city}
                                onChange={this.onChange}
                            />
                        </div>

                        <div className="form-group">
                            <label htmlFor="sta">State</label>
                            <input
                                type="text"
                                className="form-control"
                                name="state"
                                placeholder=""
                                value={this.state.state}
                                onChange={this.onChange}
                            />
                        </div>


                        <div className="form-group">
                            <label htmlFor="sta">Zipcode</label>
                            <input
                                type="text"
                                className="form-control"
                                name="zipcode"
                                placeholder=""
                                value={this.state.zipcode}
                                onChange={this.onChange}
                            />
                        </div>

                        <div class="form-group">
                            <label for="exampleFormControlSelect3">Country</label>
                            <select class="form-control" id="exampleFormControlSelect3" value= 
        {this.state.country} onChange={this.onChange}>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>

                        <div className="form-group">
                            <label htmlFor="password">Password</label>
                            <input
                                type="password"
                                className="form-control"
                                name="password"
                                placeholder="Password"
                                value={this.state.password}
                                onChange={this.onChange}
                            />
                        </div>
                        <button
                            type="submit"
                            className="btn btn-lg btn-primary btn-block"
                        >
                            Register!
          </button>
                    </form>
                </div>
            </div>
        </div>
    )
   }
  }
   export default Register

   const express = require('express') const users = express.Router() const cors = 
   require('cors') const jwt = require('jsonwebtoken') const bcrypt = require('bcrypt')

  const User = require('../models/User')
   users.use(cors())

 process.env.SECRET_KEY = 'secret'

  users.post('/register', (req, res) => {
  const today = new Date()
   const userData = {
    business_name: req.body.business_name,
    first_name: req.body.first_name,
    last_name: req.body.last_name,
    email: req.body.email,
    phone_number: req.body.phone_number,
    cell_number: req.body.cell_number,
    fax_number: req.body.fax_number,
    address1: req.body.address1,
    address2: req.body.address2,
    city: req.body.city,
    state: req.body.state,
    zipcode: req.body.zipcode,
    country: req.body.country,
    password: req.body.password,
    created: today
  }

   User.findOne({
    where: {
        email: req.body.email
    }
   })
    //TODO bcrypt
    .then(user => {
        if (!user) {
            bcrypt.hash(req.body.password, 10, (err, hash) => {
                userData.password = hash
                User.create(userData)
                    .then(user => {
                        res.json({ status: user.email + 'Registered!' })
                    })
                    .catch(err => {
                        res.send('error: ' + err)
                    })
            })
        } else {
            res.json({ error: 'User already exists' })
        }
    })
    .catch(err => {
        res.send('error: ' + err)
    })
  })

   users.post('/login', (req, res) => { User.findOne({ where: { email: req.body.email } }) .then(user => 
  { 
   if (user) { if (bcrypt.compareSync(req.body.password, user.password)) { let token = 
   jwt.sign(user.dataValues, process.env.SECRET_KEY, { expiresIn: 1440 }) res.send(token) } } else { 
   res.status(400).json({ error: 'User does not exist' }) } }) .catch(err => { res.status(400).json({ 
   error: 
    err }) }) })

   users.get('/profile', (req, res) => { var decoded = jwt.verify(req.headers['authorization'], 
    process.env.SECRET_KEY)

    User.findOne({
    where: {
        id: decoded.id
    }
    })
    .then(user => {
        if (user) {
            res.json(user)
        } else {
            res.send('User does not exist')
        }
    })
    .catch(err => {
        res.send('error: ' + err)
    })
    })

    module.exports = users

    users.get('/register',(req,res) => { var Code = req.query.Code;
    how to call


})

const Sequelize = require('sequelize')
const db = require('../database/db.js')

module.exports = db.sequelize.define(
    'user',
    {
        id: {
            type: Sequelize.INTEGER,
            primaryKey: true,
            autoIncrement: true
        },
        business_name: {
            type: Sequelize.STRING
        },
        first_name: {
            type: Sequelize.STRING
        },
        last_name: {
            type: Sequelize.STRING
        },
        email: {
            type: Sequelize.STRING
        },
        phone_number: {
            type: Sequelize.STRING
        },
        cell_number: {
            type: Sequelize.STRING
        },
        fax_number: {
            type: Sequelize.STRING
        },
        address1: {
            type: Sequelize.STRING
        },
        address2: {
            type: Sequelize.STRING
        },
        city: {
            type: Sequelize.STRING
        },
        state: {
            type: Sequelize.STRING
        },
        zipcode: {
            type: Sequelize.STRING
        },
        country: {
            type: Sequelize.STRING
        },
        password: {
            type: Sequelize.STRING
        },
        created: {
            type: Sequelize.DATE,
            defaultValue: Sequelize.NOW
        }
    },
    {
        timestamps: false
    }
)