在表渲染ReactJS之前加载API数据

import React, { Component } from 'react';
import axios from 'axios';

class TableComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: true,
    };
  }

  componentDidMount() {
    axios.get('https://api.example.com/data') // 发起API请求
      .then(response => {
        this.setState({ data: response.data, loading: false }); // 将API数据保存在状态中
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    const { data, loading } = this.state;

    if (loading) {
      return <div>Loading...</div>; // 在数据加载完成前显示加载中的提示
    }

    return (
      <table>
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr key={item.id}>
              <td>{item.column1}</td>
              <td>{item.column2}</td>
              <td>{item.column3}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default TableComponent;