如何在react js中将API响应呈现为表格形式

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function Table() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 发起API请求
    axios.get('API_URL')
      .then(response => {
        setData(response.data); // 将API响应的数据保存到state中
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <table>
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列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>
  );
}

function App() {
  return (
    <div>
      {/* ... 其他组件 */}
      <Table />
      {/* ... 其他组件 */}
    </div>
  );
}

export default App;