Отображение столбца таблицы MySQL в раскрывающемся меню в интерфейсе React с серверной частью NodeJS

#mysql #node.js #reactjs

Вопрос:

Я хочу знать, как отобразить таблицу в данных таблицы MySQL в выпадающем меню. При нажатии на выпадающее меню должны быть загружены данные в таблицу MySQL.

Это мой исходный код.

Main.js

 import React, { Component } from 'react';
export class Main extends Component {

    render() {
        return (
           <select type="select" >
            <option selected>Select ID</option>
            <option >CM0468</option>
            <option>GM0057</option>
            <option>PU0171</option>
            <option>KA0048</option>
            <option>NU0003</option>               
          </select>
       );
    }
}
export default Main
 

Это моя database.js

 var mysql = require('mysql');

var con = mysql.createConnection({
    host: "localhost",
    user: "",
    password: "",
    database: ""
});

con.connect(function(err) {
    if (err) throw err;
    con.query("SELECT * FROM siteid", function (err, result, fields) {
       if (err) throw err;
       console.log(result);
    });
});

 

Ответ №1:

У вас есть две части головоломки, но вам просто не хватает кусочка посередине.

Существует средство извлечения данных из базы данных, а также пользовательский интерфейс для отображения данных. Теперь вам нужно средство передачи данных со node стороны (сервера) на внешний интерфейс (React).

Это можно сделать различными способами, но простым способом было бы запустить веб-сервер с помощью чего-то вроде express и добавить GET конечную точку, которая будет возвращать данные вашего запроса.

Затем на переднем конце вы добавите запрос API, используя что-то вроде fetch для извлечения данных с вашего сервера.

Как только у вас будут данные, вы можете просмотреть их и select заполнить опциями из базы данных