如何在React.js表格中显示MySQL表格？

import React, { useEffect, useState } from 'react';
import mysql from 'mysql2';

const TableComponent = () => {
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    // 连接MySQL数据库
    const connection = mysql.createConnection({
      host: 'localhost',
      user: 'your_username',
      password: 'your_password',
      database: 'your_database',
    });

    // 执行查询
    connection.query('SELECT * FROM your_table', (error, results) => {
      if (error) {
        console.error(error);
      } else {
        setTableData(results);
      }
    });

    // 关闭连接
    connection.end();
  }, []);

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map((row) => (
          <tr key={row.id}>
            <td>{row.id}</td>
            <td>{row.name}</td>
            <td>{row.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default TableComponent;