在react中将数据json显示到表中

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

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

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('https://example.com/api/data');
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return (
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          {/* Add more columns if needed */}
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.property1}</td>
            <td>{item.property2}</td>
            <td>{item.property3}</td>
            {/* Render more properties if needed */}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default TableComponent;