如何在React表中显示Mysql中的数据

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

const TableComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const connection = mysql.createConnection({
      host: 'localhost',
      user: 'your_username',
      password: 'your_password',
      database: 'your_database',
    });

    connection.connect();

    connection.query('SELECT * FROM your_table', (error, results) => {
      if (error) throw error;
      setData(results);
    });

    connection.end();
  }, []);

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

export default TableComponent;