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

Question

我创建了一个简单的 Web 应用程序，它成功连接到 MySQL 数据库。 我现在想呈现表格availabilties以便它在网页上很好地显示 - 最好使用引导程序类。 下面是一个代码片段，其中我显示标题列，后跟一个<td>元素，该元素应该为表中的每个值呈现唯一的id 。

render() {
    return (
      <main className="container my-5">
        <h1 className="text-primary text-center">Current Availability</h1>
        <table className="table table-dark">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Queue</th>
              <th scope="col">CallDate</th>
              <th scope="col">TimeStart</th>
              <th scope="col">SecsFromMidnight</th>
              <th scope="col">TimeEnd</th>
              <th scope="col">EndSeconds</th>
              <th scope="col">TimeSlotCapacity</th>
              <th scope="col">Available</th>
              <th scope="col">Pending</th>
              <th scope="col">CallsCommitted</th>
            </tr>
          </thead>
          <tbody>
            <td>
              {this.state.availabilities.map(availability => {
                return <td>{availability.id}</td>;
              })}
            </td>
          </tbody>
        </table>
      </main>
    );
  }
}

在目前的形式中，它如下所示：

我希望它垂直列出 ID 值。 当我协助编写此逻辑时，我可以继续为其他数据库属性执行此操作。

数据接口：

export interface IAppState {
  availabilities: Array<{
    id: string;
    queue: string;
    call_date: string;
    time_start: string;
    start_seconds_from_midnight: string;
    time_end: string;
    end_seconds_from_midnight: string;
    timeslot_capacity: string;
    available: string;
    pending: string;
    calls_committed: string;
  }>;
}

用于检索数据的 ts 文件：

import { Connection } from "./index";

export const all = async () => {
  return new Promise((resolve, reject) => {
    Connection.query("SELECT * FROM availability", (err, results) => {
      if (err) {
        return reject(err);
      }
      resolve(results);
    });
  });
};

export default {
  all
};

Answer 1

<table className="table table-dark">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Queue</th>
          <th scope="col">CallDate</th>
          <th scope="col">TimeStart</th>
          <th scope="col">SecsFromMidnight</th>
          <th scope="col">TimeEnd</th>
          <th scope="col">EndSeconds</th>
          <th scope="col">TimeSlotCapacity</th>
          <th scope="col">Available</th>
          <th scope="col">Pending</th>
          <th scope="col">CallsCommitted</th>
        </tr>
      </thead>
      <tbody>
        {this.state.availabilities.map(availability => {
          return (
            <tr>
              <td>{availability.id}</td>
            </tr>
          );
        })}
      </tbody>
    </table>

我最终做了更多的研究，并通过上面的代码示例自己解决了这个问题。