从Flask输入的JSON在React中创建一个表

// React组件
import React, { useState, useEffect } from 'react';

const TableComponent = () => {
  const [jsonData, setJsonData] = useState([]);

  useEffect(() => {
    fetch('/api/data') // Flask服务器的API端点
      .then(response => response.json())
      .then(data => setJsonData(data));
  }, []);

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

export default TableComponent;

[
  {
    "column1": "Value 1",
    "column2": "Value 2",
    "column3": "Value 3"
  },
  {
    "column1": "Value 4",
    "column2": "Value 5",
    "column3": "Value 6"
  },
  ...
]