如何在React中将Axios响应循环到表

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

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

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

  const fetchData = async () => {
    try {
      const response = await axios.get('API_URL');
      setData(response.data);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      {/* 表格代码 */}
    </div>
  );
};

return (
  <div>
    <table>
      <thead>
        <tr>
          <th>列标题1</th>
          <th>列标题2</th>
          {/* 其他列标题 */}
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            <td>{item.column1}</td>
            <td>{item.column2}</td>
            {/* 其他列数据 */}
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);