React js -在ajax调用后更新表行

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

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

  useEffect(() => {
    // 发起Ajax调用获取数据
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 更新表格数据
        setTableData(data);
      });
  }, []);

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

export default TableComponent;